解决使用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导致的，禁止检查就好了

解决使用vue-cli脚手架构建的项目不能通过手机访问

猜你喜欢