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

文章目录

• 一、前言
• 二、配置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生成的部署文件，上传到云端

四、配置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;
        }
    }