vue项目打包后打开index.html页面显示空白问题
博主终于完成了自己的demo项目,到了打包这一步。通过npm run build命令打包后会在项目文件中生成一个名为dist的文件夹,里面是打包后的项目文件和资源。但是,打开index.html文件后却显示一片空白,打开控制台还会发现有报错,找不到页面路径。问题原因:config文件夹下index.js中的build命令的配置有一个属性叫assetsPublicPath,默认为 assets...
·
博主终于完成了自己的demo项目,到了打包这一步。通过npm run build
命令打包后会在项目文件中生成一个名为dist
的文件夹,里面是打包后的项目文件和资源。但是,打开index.html
文件后却显示一片空白,打开控制台还会发现有报错,找不到页面路径。
- 问题原因:
config文件夹下index.js中的build命令的配置有一个属性叫assetsPublicPath,默认为assetsPublicPath:' / '
,意思是根目录,这时会从index.html所在的硬盘的根目录下开始查找,自然无法找到。
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
...
}
- 解决办法:
改为assetsPublicPath:' ./ '
,这时就不再是绝对路径的根目录了,而是改为了相对路径,同目录下进行查找。
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
...
}
重新打包项目,index.html就显示正常了。
更多推荐
已为社区贡献6条内容
所有评论(0)