解決使用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導致的，禁止檢查就好了