最近改用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
}
小坑：
然而實際項目上這樣改了還是無法打開文件狮辽，找了好久一也，最后發(fā)現(xiàn)在router上有配置
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes
})
引掉mode和base,就好了。應該是base設置的問題喉脖，以后再找資料補全原因吧
