您当前的位置：首页 > 学海无涯 > 其他网站首页其他

Vue项目使用二级目录

发布时间：2021-02-23作者：♂逸風★淩軒

示例：修改项目根目录为/admin/二级目录


一、Vue项目：

1、项目代码变更：

# vim vue.config.js

在module.exports模块里修改publicPath

一般

publicPath: '/',

修改为

publicPath: '/admin/',

2、修改路由配置示例

const router = new VueRouter({
  mode: 'history',
  base:'/admin/',
  routes
})

或


const createRouter = () => new Router({
  mode: 'history',
  base: '/admin/',
  routes: constantRoutes
})

3、修改代码解析层Nginx配置

server {
    listen       8081;
    server_name  localhost;
    location /admin {
        alias /usr/share/nginx/html/admin/;
        index  index.html;
        try_files $uri $uri/ @action;
    }
    location @action {
        rewrite ^.*$ /admin/index.html last;
    }
}

4、修改代理层Nginx配置

server{
    listen  80;
    server_name  admin.xxxx.cn;
    location /admin {
         proxy_pass http://127.0.0.1:8081/admin;
    }
    location / {
         rewrite ^(.*)$  http://admin.xxxx.cn/admin/ permanent;
    }
}

5、开发端调试自建Nginx配置

⑴修改本地host文件，将调试域名指向本地

127.0.0.1  admin.xxxx.cn

⑵部署开发本地Nginx服务，配置Nginx文件

server{
    listen  80;
    server_name  admin.xxxx.cn;
    location /admin {
        #代理至开发编辑器调试页面  
        proxy_pass http://127.0.0.1:9091;
    }
    location / {
        #转发域名头
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-NginX-Proxy true;
        #支持Scoket
        proxy_http_version 1.1;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_read_timeout 120s;
        #代理至远程接口代理Nginx服务IP
        proxy_pass http://1.1.1.1;
    }
}