1、新建一个项目,使用vue-cli 3.0进行构建,使用了vux和vue-router,本地运行时是没有问题的,但是在打包之后,页面就一片空白,打开控制台会看到是各种资源引用出错。
这是因为webpack的配置不对,只需要将webpack的配置修改一下就好。
vue-cli 3.0 内置了webpack,并且将vue的配置文件作为了一个可选的配置(创建时没有),如果需要修改vue和webpack的配置,则需要自己建一个配置文件 vue.config.js 放在项目的根目录下。
然后设置一个publicPath:
module.exports = { publicPath: './'}这样在打包的时候,就能加载到静态资源了。
2、在router里面的mode配置,默认设置为 history ,只要将这个mode注释掉再打包,就能正常显示了。
const router = new VueRouter({
//注释掉就好了 // mode: 'history', base: process.env.BASE_URL, routes})
当然也可以使用history模式的路由,只是项目需要在服务器环境下运行