vue cli3 在build 打包完成，访问的时候空白页，路径错误

vue cli3 在build 打包完成，访问的时候空白页，路径错误

阐述

在使用cli3 开发的过程中，不会出现空白页的问题，因为都是访问的localhost。但是项目完成以后，打包上线，访问的时候出现空白页。

解决方案如下：

在src文件夹同级目录下创建vue.config.js文件

• 这里在网上查看的有的是写：baseUrl，在npm run serve的时候发现会报错：Invalid options in vue.config.js: “baseUrl” is not allowed。原因是cli3不在支持baseUrl的写法，改成以下即可。

针对上述问题的错误写法：

module.exports = {
    //...
    baseUrl: './'
    //...
}

修改为正确写法：

module.exports = {
	lintOnSave: false,// 关闭eslint提示
	publicPath: process.env.NODE_ENV === 'production'
		? './'
		: '/',
}

重新打包之后上传服务器，发现访问是不会报错了，但是请求的资源（如index.html）这些又报304问题，然后顺着这个思路尝试着调整下路由相关的配置。

• 这里不在详述怎么安装router

router.js

• path：跟目录
• mode：“history” 生效，如果页面还是空白，可以尝试【mode：“hash”】

// 2. 创建router
const routes = [
  {
    path: '/',
    redirect: '/home'
  }
]

const router = new VueRouter({
  routes,
  mode: 'history'
})

在main.js绑定路由

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  render: h => h(App),
  router,
}).$mount('#app')

最后重新 npm run serve，然后在build打包。再重新访问就成功啦。

• 图中的路径就是直接在dist文件夹下面访问的index.html文件即可。