VueJS爬坑记(3) - 打包后无法渲染页面
起因
使用Webpack学习VueJS一段时间之后,准备使用Webpack的build编译生成上线代码。
然而,在将npm run build
之后生成的dist/
目录部署上线时,却是一片空白
问题分析
经过Webpack打包的项目,默认的路由根目录都是#/
开始的,而该页面所有的scripts引用的都是/static
下,而非#/static
下的,而这就是为什么整个项目的脚本源码文件都无法加载的原因。
填坑
经过上网查阅资料,我找到了Vue-cli项目中的打包配置文件的所在:/config/index.js
,其中的build
字段如下:
既然是针对build的配置,而且编译后所有的scripts都是放在#/static/
下的,于是想到使用相对路径的根目录./
代替绝对路径的根目录/
,再次执行npm run build
,问题解决。