zoukankan      html  css  js  c++  java
  • 解决使用vue-cli脚手架构建的项目不能通过手机访问

    使用vue-cli+webpack构建的项目在同一个局域网下,通过ip电脑的浏览器可以访问,但是手机不能访问。

    这个问题困扰了本宝宝好长时间,在网上搜了这种解决办法均不奏效

    下面是config

     dev: {
    
            // Paths
            assetsSubDirectory: 'static',
            assetsPublicPath: '/',
            proxyTable: {
                target: ''
            },
            // Various Dev Server settings
            host: '192.168.1.27', // can be overwritten by process.env.HOST
            port: 8020, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
            autoOpenBrowser: true,
            errorOverlay: true,
            notifyOnErrors: true,
            poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    
            /**
             * Source Maps
             */
    
            // https://webpack.js.org/configuration/devtool/#development
            devtool: 'cheap-module-eval-source-map',
    
            // If you have problems debugging vue-files in devtools,
            // set this to false - it *may* help
            // https://vue-loader.vuejs.org/en/options.html#cachebusting
            cacheBusting: true,
    
            cssSourceMap: true
        }

    最基本的,将默认的localhost或者是127.0.0.1换成自己的ip地址,使用手机打开,测试,还是不行

    不行的话接着

    修改package.json

    "dev": "webpack-dev-server --inline --progress  --config build/webpack.dev.conf.js --port 8020 --host 192.168.1.27",

    使用手机打开,仍然不行

    将防火墙关闭试试,测试,还是不行

    后来求助于后台老大,修改了一个地方就ok了,让我好一番感慨,大神就是大神啊~

    修改webpack.dev.confog.js

     devServer: {
            clientLogLevel: 'warning',
            historyApiFallback: {
                rewrites: [
                    { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
                ],
            },
            hot: true,
            contentBase: false, // since we use CopyWebpackPlugin.
            compress: true,
            disableHostCheck: true,
            host: HOST || config.dev.host,
            port: PORT || config.dev.port,
            open: config.dev.autoOpenBrowser,
            overlay: config.dev.errorOverlay ? { warnings: false, errors: true } : false,
            publicPath: config.dev.assetsPublicPath,
            proxy: config.dev.proxyTable,
            quiet: true, // necessary for FriendlyErrorsPlugin
            watchOptions: {
                poll: config.dev.poll,
            }
        },

    在devServer里面增加disableHostCheck:true

    原来新版的webpack-dev-server修改了一些东西,默认检查hostname导致的,禁止检查就好了

  • 相关阅读:
    201521044091《Java程序设计》第7周学习总结
    201521044091《java程序设计》第四次总结
    201521044091 《java程序设计》第八周学习总结
    201521044091 《Java程序设计》第5周学习总结
    201521044091 《Java程序设计》第2周学习总结
    201521044091 《Java程序设计》第3周学习总结
    MySQL设置字符集CHARACTER SET
    Create My MySQL configuration by Percona
    How to use jQuery to manipulate Cookies
    How to use OpenXml to import xml data to Sql server
  • 原文地址:https://www.cnblogs.com/wsblogs/p/9293351.html
Copyright © 2011-2022 走看看