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

新建一个项目，使用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的环境运行浏览。