nginx 去除井号操作

White feathe

发布于 2021-12-08 15:15:53

1.2K0

发布于 2021-12-08 15:15:53

文章被收录于专栏：White feathe 的博客

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018/07/15 ，如有侵权请联系 cloudcommunity@tencent.com 删除

nginx