使用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导致的,禁止检查就好了
哎,大神就是大神,就是不一样