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文件即可。