1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html模板文件打开空白 Webpack打包index打开空白

html模板文件打开空白 Webpack打包index打开空白

时间:2024-01-25 10:07:56

相关推荐

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: "/assets/", // CDN(总是 HTTPS 协议)

publicPath: "///assets/", // CDN (协议相同)

publicPath: "/assets/", // 相对于服务(server-relative)

publicPath: "assets/", // 相对于 HTML 页面

publicPath: "../assets/", // 相对于 HTML 页面

publicPath: "", // 相对于 HTML 页面(目录相同)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。