Vue.js踩坑记录:vue-cli 3.0 项目打包后页面空白

纵然是瞬间 提交于 2021-02-11 21:00:19

新建一个项目,使用vue-cli 3.0进行构建,使用了vux和vue-router,本地运行时是没有问题的,但是在打包之后,页面就一片空白,打开控制台会看到是各种资源引用出错。

这是因为webpack的配置不对,只需要将webpack的配置修改一下就好。

vue-cli 3.0 内置了webpack,并且将vue的配置文件作为了一个可选的配置(创建时没有),如果需要修改vue和webpack的配置,则需要自己建一个配置文件  vue.config.js  放在项目的根目录下。

然后设置一个baseUrl:

module.exports = {

    baseUrl: './'

}

这样在打包的时候,就能加载到静态资源了。

 

然后这个时候还没完,修改完之后,页面变成了这个样子:

 

 页面上只剩一个在App.vue里面的两个跳转按钮,并且跳转按钮跳转后也是不对的。

 这个是因为在router里面的mode配置,默认设置为 history ,只要将这个mode注释掉再打包,就能正常显示了。

 

当然也可以使用history模式的路由,只是项目需要在服务器环境下运行。

比如使用node的serve,这个在vue-cli的文档中有说:https://cli.vuejs.org/zh/guide/deployment.html

我是直接使用了phpstudy的环境运行浏览。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!