Webpack打包index打开空白

不做配置的话，Vue提供的webpack模板 npm run build打包之后打开dist/index.html是空白的

打开浏览器调试，文件未找到

查看Element

路径是根目录下，所以并没有相应资源

解决方法：

config/index.js中的module.exports.build.assetsPublicPath由根目录/改为相对路径./

  build: {
// Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: ' ./',
    ...
}

重新打包，打开，完美

原因

• Webpack的output配置中的publicPath属性
• 这个属性设置对应的是打包后的index.html中写入js和css文件的位置
• webpack.base.conf.js中

  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  }

publicPath 通过开发环境不同，读取不同的配置进行设置，所以我们直接修改config/index.js就可以了

• 该配置也可以设置为打包后的资源的CDN地址

publicPath: "https://cdn.example.com/assets/", // CDN（总是 HTTPS 协议）
publicPath: "//cdn.example.com/assets/", // CDN (协议相同)
publicPath: "/assets/", // 相对于服务(server-relative)
publicPath: "assets/", // 相对于 HTML 页面
publicPath: "../assets/", // 相对于 HTML 页面
publicPath: "", // 相对于 HTML 页面（目录相同）