最近改用vue-cli3，和2有很大的不同，配置的地方也改了很多。
原理：
- Webpack的output.publicPath即为配置打包后的js/css/xx等index.html内加载的文件的路径，默认为'/'
2.x下配置
webpack.base.conf.js
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
// 这里是配置
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
}
}
- 所以我们去找
config/index.js
- 所以我们去找
build: {
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './', // 修改这里 ‘/’ -> './'
}
3.x的配置
-
vue-cli 3.x的webpack 配置需要在根目录下新建vue.config.js文件，module.exports导出配置
module.exports = {
publicPath: './' // <----这里就是会修改webpack的outPath.publicPath
}
小坑：
然而实际项目上这样改了还是无法打开文件，找了好久，最后发现在router上有配置
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes
})
引掉mode和base,就好了。应该是base设置的问题，以后再找资料补全原因吧
