vue-router使用history模式

vue 路由

• 默认hash路由，地址栏会加’#‘
• history路由，地址栏更容易理解，可读性高 （需要前后端共同配置）

nginx

• 特点是占有内存少，并发能力强，给使用者带来了很多的便利。nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，在BSD-like 协议下发行。
• 作用
  1、作为 Web 服务器；
  2、负载均衡服务器；
  3、邮件代理服务器等三个方面。

配置history路由

## vue-router 使用 history 模式

- 前端和服务器都要做相应的配置

```js
//--- 当在非本地环境时，这里以项目test-daily为例，即打包后的h5项目部署服务器的test-daily目录下
// --- 前端
const routes = [...]

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,  // 如果使用history模式，必须设置base参数
  routes
});

export default router;

// vue.config.js 配置PublicPath
  publicPath: process.env.NODE_ENV == 'development' ? './' : '/test-daily/'  // 默认是'/', 表示应用是别部署在一个域名的根路径上，设置为'./'，可以避免打包后的静态页面空白

// --- 后端 （nginx）
location /test-daily {
  try_files $uri $uri/ /test-daily/index.html;
}

https://cli.vuejs.org/zh/config/#publicpath

• vue-cli中vue.config.js配置参考官网