Vue-cli3.x 打包之后index打开空白

最近改用vue-cli3，和2有很大的不同，配置的地方也改了很多。

原理：

• Webpack的output.publicPath即为配置打包后的js/css/xx等index.html内加载的文件的路径，默认为'/'

2.x下配置

• 1. 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
  }
}

• 2. 所以我们去找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设置的问题，以后再找资料补全原因吧