vue项目修改前缀访问（若依前端）

一、背景

项目采用vue前端编写，访问页面的时候，没有前缀，直接访问，比如：http://127.0.0.1/。现在希望通过后缀admin访问，比如：http://127.0.0.1/admin/inde、http://127.0.0.1/admin/login。这种通过后缀访问，就需要调整前端代码逻辑。我基于自己项目的情况，整理代码内容如下。所有内容仅供学习，知识传播。

二、修改代码

1、修改vue.config.js，重点publicPath配置（publicPath: process.env.NODE_ENV === "production" ? "/admin" : "/",），代码如下：

// 部署生产环境和开发环境下的URL。
  // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
  // 例如如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
  publicPath: process.env.NODE_ENV === "production" ? "/admin" : "/",
  // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
  outputDir: 'dist',
  // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
  assetsDir: 'static',

2、修改路由代码，主要：router/index.js

export default new Router({
  mode: 'history', // 去掉url中的#
  base: 'admin',//前缀页面
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

三、nginx配置

本人将vue前端发版后的代码放到：D:\vue\admin。这个位置要和admin节点配置保持一致；

　　　　##这个很含有意思，带斜杠和不带斜杠  
　　　　location /stage-api/ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;    
            proxy_pass http://localhost:8081/;  #这个很含有意思，带斜杠和不带斜杠           
        }
　　　　
      location /admin{
        root D:/vue/;
        index index.html;
        #所有找不到的文件都指向 index.html，由于路由信息都是通过index.html控制的，所以这个配置很关键
        try_files $uri $uri/ /admin/index.html;
    }

　　　　或者通过

　　　　location /admin {
　　　　　　alias D:/vue/admin;
　　　　　　index index.html index.htm;
　　　　　　try_files $uri $uri/ /admin/index.html;
　　　　}

 

root 的特点：

• 拼接：root 路径 + 完整的 location 匹配部分

• 适合：文件系统路径和 URL 路径结构一致

alias 的特点：

• 替换：用 alias 路径替换 location 匹配部分

• 适合：文件系统路径和 URL 路径结构不一致

try_files 配置详解

try_files $uri $uri/ /admin/index.html;

   这行配置的含义：

1. $uri：尝试直接访问请求的文件

2. $uri/：尝试作为目录访问

3. /admin/index.html：如果都找不到，返回这个文件（相对于 root 路径）