记录Vue问题： Vue cli3创建项目，打包后放到线上，显示为空白页面

记录Vue问题： Vue cli3创建项目，打包后放到线上，显示为空白页面

我们能看到，其实页面上的css,js文件已经加载成功，但是路由没有执行
经过网上查阅

我在项目搭建时，使用的路由模式为history

那么使用history模式，如果创建的项目放到了根目录的话，不会出现这种问题。但一般情况下都不会放在根目录下，而是放在了子文件夹下面

那么遇到这种情况有两种解决办法

1 向后台询问子文件夹的名称，假如名称是ecm，那么你需要在路由中做以下配置。

router-index.js

const router = new VueRouter({
base: ‘/ecm’, // 基础路径
mode: ‘history’,
routes: […],
})
添加完base: ‘/ecm’,的设置后，访问路径会在后面多出/ecm，比如https://www.baidu.com/ecm。之前访问页面空白的原因则是因为路径不对，请求不到资源。

更多细节可以参考 vue router官方文档

https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

2 修改路由模式为hash模式

const router = new VueRouter({
mode: ‘hash’,
)
即可解决问题