html模板文件打开空白,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 页面(目录相同)