nginx 去除井号操作

Vue、React、Argular 路由去除井号操作

寻找框架对应的路由中配置

例如 Vue-Router配置：

1、首先将路由的 mode 设置为 history

import Vue from 'vue';
import Router from 'vue-router';Vue.use(Router);const router = new Router({mode: 'history', // 访问路径不带井号  需要使用 history模式base: '/home',  // 基础路径routes: [{path: '/index',name: 'index',component: resolve => require(['@/views/index'], resolve) // 使用懒加载}]
});

history 的这种模式需要后台配置支持，将 model 设置为 history 的时候，打开项目主页，一切正常，可以访问，但是当我们刷新页面或者直接访问路径的时候就会出现404。

原因： 那是因为在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当我直接在浏览器里输入这个地址的时候，就要对服务器发起http请求，此时这个目标在服务器上又不存在，所以会返回404，如何解决呢？我们现在可以把所有请求都转发到 http://localhost:8080/index.html上就可以了。
此刻就用到了 nginx 做个代理操作。

nginx 中的配置

配置方案1：

location / {if (!-e $request_filename) {rewrite ^(.*)$ /index.html?s=$1 last;break;}root   D:/workspace/Rkatsiteli-WeChat-WebFront/xiaobao/h5-pc/dist;#本地地址index  index.html index.htm;proxy_pass http://tomcat_cluster;
}

配置方案2：

由 Vue 官网提供：Vue router history 配置

修改完成nginx之后重启, nginx -s reload 即可！

注意：

webpack 中关键配置：

output: {path: resolve(pkg.output.path),publicPath: '/',filename: "assets/js/[name].js",chunkFilename: "chunk/[name].js",library: "so",libraryTarget: 'umd',umdNamedDefine: true,sourcePrefix: "\t" //更改输出包中每行的前缀
},

将 publicPath设置为 / 因为 publicPath: '/home/page/', 如果使用相对路径，chunk文件会报错找不到。

参考地址：https://www.cnblogs.com/tugenhua0707/p/8127466.html

https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations