新建一个项目,使用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注释掉再打包,路由就争取了。