Vue.js踩坑记录:vue-cli 3.0 项目打包后打开index.html页面以及二级路由页面显示空白

699 阅读1分钟

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模式的路由,只是项目需要在服务器环境下运行