Nginx部署多个Vue项目，配置二级域名

末蓝、 2023-01-14 01:52 240阅读 0赞

### 文章目录 ###

*  一、前言
 *  二、配置Vue工程
 *   *  2.1 配置router
     *  2.2 配置vue.config
 *  三、上传dist文件
 *  四、配置nginx.cnf

# 一、前言 #

*  一个服务器需要部署多个前端项目
    
     *  比如需要一个企业官网
     *  比如需要一个管理系统
 *  这时候一个Nginx要怎么配置多个前端项目呢
 *  本文详细讲解： **`通过二级域名的方式来部署多个项目`**，实现如下效果：
    
     *  访问www.xxx.com到企业官网
     *  访问www.xxx.com/admin到管理系统

# 二、配置Vue工程 #

*  一级域名的`view`不用改
 *  二级域名的`admin`需要修改

## 2.1 配置router ##

`src/router/index.js`

*  增加一行`base: 'admin',`

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

## 2.2 配置vue.config ##

`vue.config.js`

*  修改`publicPath: "/admin/",`

// vue.config.js 配置说明
    //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
    // 这里只列一部分，具体配置参考文档
    module.exports = { 
      // 部署生产环境和开发环境下的URL。
      // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
      // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
      publicPath: "/admin/", //process.env.NODE_ENV === "production" ? "/" : "/",
      // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
      outputDir: 'dist',
      // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
      assetsDir: 'static', 
      // 是否开启eslint保存检测，有效值：ture | false | 'error'
      lintOnSave: false,

# 三、上传dist文件 #

*  dist是Vue生成的部署文件，上传到云端

![在这里插入图片描述][20210419212707553.png]

# 四、配置nginx.cnf #

*  一级域名部署`view_dist`
 *  二级域名部署`admin_dist`
 *  一级域名路径用`root`，二级域名路径用`alias`

vim /usr/local/nginx/conf/nginx.conf
    cd /usr/local/nginx/sbin/
    ./nginx -s reload

server {
            listen       80;
            server_name  localhost;
    
            location / {
                root   /root/software/view_dist;
                try_files $uri $uri/ /index.html;
                index  index.html index.htm;
            }
    
            location /admin {
                alias   /root/software/admin_dist;
                try_files $uri $uri/ /index.html;
                index  index.html index.htm;
            }
    
            location /prod-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:8080/;
            }
            #error_page  404              /404.html;
    
            # redirect server error pages to the static page /50x.html
            #
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
        }

***觉得好，就一键三连呗（点赞+收藏+关注）***

[20210419212707553.png]: /images/20221022/3361936f453a4dd199d8379425cb9c71.png