【vue-cli3_路由】：history模式部署项目，显示白屏。

Question

问题描述

vue-cli3打包的项目部署到服务器，访问首页白屏。

问题出现的环境背景及自己尝试过哪些方法

1.环境背景
a 为解决微信支付访问不到支付url问题，将路由hash模式改为history
b 基于vue-cli3构建工具构建的微信公众号移动推广业务
c 项目支付功能基于JSAPI
d 路由模式使用history
2.尝试方法
a hash路由前端写死，可以调起微信支付，但维护困难
b 改为history,查阅如下文档.提供主要解决方式如下：
【1】将路由即router.js中base改为实际访问项目路径。
【2】将vue.config.js中publicPath改为与router.js中base中一样值
【3】后端nginx服务器，已按照如下文档中配置更改。
https://www.cnblogs.com/golov...

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
export default new Router({
mode: "history",
base: "/fe/telecom029",
routes: [

{
  path: "/",
  redirect: "home"
},
{
  path: "/home",
  name: "home",
  component: Home,
  meta: {
    title: "首页",
    requireAuth: false
  }
},
{
  path: "/user",
  name: "user",
  component: User,
  meta: {
    title: "我的",
    requireAuth: true
  }
},
{
  path: "/withdraw",
  name: "withdraw",
  component: Withdraw,
  meta: {
    title: "提现",
    requireAuth: true
  }
}

]
})
//部署应用包时的基本URL，就是访问时的url
publicPath: process.env.NODE_ENV === "production" ? "/fe/telecom029/" : "./",

//生产构建文件的目录
outputDir: "./telecom029",

//生成的静态资源在他们的文件名中包含了hash以便更好地控制缓存，要求index的HTML是被Vue CLI自动生成
filenameHashing: false,
//打包静态资源目录
assetsDir: "./static",

//是否在开发环境下通过eslint-loader在每次保存时lint代码，这个值会在@vue/cli-plugin-eslint被安装之后生效
lintOnSave: true,

//一个指定了entry，template,filename,title和chunks的对象
pages: {

index: {
  //page的入口
  entry: "src/main.js",
  //模板来源
  template: "public/index.html",
  //在dist/index.html的输出
  filename: "index.html",
  title: "首页"
}

}

你期待的结果是什么？实际看到的错误信息又是什么？

实际看到错误信息：We're sorry but h5-move doesn't work properly without JavaScript enabled. Please enable it to continue.
期望结果：通过history路由模式下页面展现，且进行刷新操作不出现404问题。

Answer 1

服务器404重定向到默认路由

Answer 2

1.We're sorry but h5-move doesn't work properly without JavaScript enabled. Please enable it to continue.
出现上述的原因总结一点：js未加载或js加载不正确。
原因：后端配置有问题，请求js但却未返回js
切记
1.在router.js中base字段配置url的路由地址，这个需要与后端域名根目录前的路径保持一致
2.在vue.config.js中将publicPath的目录更改与base一致。