VueJS爬坑记(3) - 打包后无法渲染页面

起因

使用Webpack学习VueJS一段时间之后,准备使用Webpack的build编译生成上线代码。
然而,在将npm run build之后生成的dist/目录部署上线时,却是一片空白

问题分析

  1. 打开Chrome开发者工具的Network板块时,发现大量的文件无法加载:
    http://lenconda.top/images/17113001.png

  2. 对首页路由进行元素分析,结果如下:
    http://lenconda.top/images/17113002.png
    我的猜测如下:

经过Webpack打包的项目,默认的路由根目录都是#/开始的,而该页面所有的scripts引用的都是/static下,而非#/static下的,而这就是为什么整个项目的脚本源码文件都无法加载的原因。

填坑

经过上网查阅资料,我找到了Vue-cli项目中的打包配置文件的所在:/config/index.js,其中的build字段如下:
http://lenconda.top/images/17113003.png

既然是针对build的配置,而且编译后所有的scripts都是放在#/static/下的,于是想到使用相对路径的根目录./代替绝对路径的根目录/,再次执行npm run build,问题解决。

将最新的文章发送到你的邮箱

展示评论