nginx同时部署多个vue项目
 

 项目1路径：
 
 项目2路径：
 
 nginx.conf代码如下：
 

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        location / {
	root /usr/local/nginx/vue/dist;
            	index index.html;
        }  
	location /vue-admin-template {
	    alias /usr/local/nginx/vue-admin-template/dist;
	    expires  1d;
	    index index.html;
	    autoindex on;
        }
 
部署结果：
 
项目1地址：http://127.0.0.1/
 项目2地址：http://127.0.0.1/vue-admin-template/#/login

Nginx线上部署多个Vue项目(路径区分)
 
 
 
nginx 多静态文件部署。
 我个人博客项目占用了nginx根路径，而我只有一个域名，也不准备用二级域名了， 所以就直接用路径区分开。
 一个域名，只部署一个静态文件服务，那很简单，只用把打包后文件放上去就行。
 多个Vue项目主要就是路径问题，静态js文件以及自定义的路由。
 
 
原文请访问 我个人博客地址
 
博客地址: https://www.charmcode.cn/article/2020-06-30_nginx_vue
 
环境
 
vue 2.6.11
vue-router 3.3.1
vue-cli 4.4.0
 
由于我用的vue-cli 4,所以项目根路径下默认没有 vue.config.js文件, 我在官网看到关于这个vue.config.js是这样描述的.
 
参考官网说明https://cli.vuejs.org/zh/config/:
 
 
 
有些针对 @vue/cli 的全局配置，例如你惯用的包管理器和你本地保存的 preset，都保存在 home 目录下一个名叫 .vuerc 的 JSON 文件。你可以用编辑器直接编辑这个文件来更改已保存的选项。
 你也可以使用 vue config 命令来审查或修改全局的 CLI 配置
 
 
添加配置vue.config.js 文件 静态资源路由js,css等路径
 
但是 vue config 是全局的配置，我这个项目直接修改这里不合适，于是我就在项目 根路径 下自己手动添加了vue.config.js
 

// 参考 https://cli.vuejs.org/zh/guide/deployment.html#github-pages
module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
        ? '/app/mall/'   // /app/mall/ 对应后面`nginx`路径，这里添加的目的是其他静态资源文件统一前缀路径
        : '/',
};
 
修改src/router/index.js, 项目页面跳转路由
 
const router = new VueRouter({
    base: '/app/mall',   // 主要添加这个 /app/mall 注意这个 和上面的一致，为nginx location路径， 也就是请求路径
    routes,
    mode: 'history'
});

 
修改 src/config/index.js 项目生产请求地址(非必要)
 
 
 
非必要，这个地方每个人封装的都不一样，默认会请求 部署的环境地址。
 
 
export let appConfig = {
    development: 'http://127.0.0.1:8010',      // 本地开发 (ps:vue-cli会自动帮我们区分生产开发，npm run serve就是开发，
    production: 'https://www.your_domain.com',  // 生产地址 npm run build 默认为生产
};

 
 
 
然后 我是在src/utils/url.js 文件里面 区分前缀的， 最后在 src/utils/request.js 文件里面使用。
 
 
修改好之后，可以npm run serve看看，区分好之后能否正常访问，是否有改错。
 没有改错可以直接npm run build 生成静态文件
 
上传静态文件
 
 
 
我是通过FillZilla上传静态资源文件
 
 
我是上传到服务器 /data/mall/ 文件夹下， 记住这个文件路径, 后面nginx会指向这里。
 
nginx 文件配置
 
 
 
Centos7 nginx默认配置地址为 /etc/nginx/nginx.conf
 或者有的版本默认引入 /etc/nginx/conf.d/default.conf文件 配置
 
 

server {

    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;
        
    # ...
    location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
    }
    
    
    # 添加文件
    # /app/mall 项目访问路径和上面地址对应 
    location /app/mall/ {
        alias /data/mall/;   # 项目存放路径
        try_files $uri $uri/ /app/mall/index.html;  # 内部项目跳转路径
    }

}

 
检测配置是否有语法错误
 
nginx -t

 
重新加载配置
 
nginx -s reload

 
个人项目部署地址
 
线上地址: https://www.charmcode.cn/app/mall/home
 项目Github地址: https://github.com/CoderCharm/Mall/blob/master/DEPLOYMENT.md

先看效果
 
app1
 
浏览器输入192.168.66.66:10000/app1 访问app1
 
 
 
 
app2
 
浏览器输入192.168.66.66:10000/app2 访问app2
 
 
配置方法
 

1. 前台代码更改3个地方
	- 发网络请求的路径加固定前缀， 如：testurl #注意如果还在开发阶段，需要更改vue.config.js的代理配置
	- 前端路由base固定前缀路径 app1
	- 前端项目的虚拟项目名  app1
	# 注意：路由固定路径和虚拟项目名必须一致
	
2. 配置 nginx   网络请求的转发    前台地址重定向
 
示例1
 
 
 
 
 
src\libs\api.request.js 改网络请求统一前缀
 
 
vue.config.js 配置开发时代理
 
 
src\router\index.js 改路由base固定前缀
 
 
vue.config.js 配置前端虚拟项目名
 
 
 
 
1. 前台代码更改配置
 
 
 
src\libs\api.request.js 改网络请求统一前缀 testurl
 
 
const baseUrl = '/testurl'
 
 
vue.config.js 配置开发时代理,保证开发时也能正确访问到后台 testurl
 
 
devServer: {
    proxy: {
      '/testurl/api': {
        target: 'http://10.111.43.12:8090/',
        pathRewrite: { '^/testurl/api': '/' }
      }
    }
  }
 
 
src\router\index.js 改路由base固定前缀 app1
 
 
Vue.use(Router)
const router = new Router({
  base: 'app1',
  routes,
  mode: 'history'
})
 
 
vue.config.js 配置前端虚拟项目名 /app1/
 
 
const BASE_URL = '/app1/'

publicPath: BASE_URL,
 
 
2. nginx 配置
 
server {
        listen       10000;
        server_name  localhost;

        add_header                  Set-Cookie "HttpOnly";
        add_header                  Set-Cookie "Secure";
        add_header                  X-Frame-Options "SAMEORIGIN";

        #此配置可省略，仅仅是为了输入10.111.43.12:10000 时有个默认首页        
        location / {
            root html/;
            index index.htm index.html;
        }
        # 前台页面重定向 ,不能配置root alias ;记得把dist下的内容外移一层
        location ^~ /app1/ {
            try_files $uri $uri/ /app1/dist/index.html;
        }
        location ^~ /app2/ {
            try_files $uri $uri/ /app2/dist/index.html;
        }

        # 网络配置转发到网关
        location /cxyxcwdzurl/api/ {
            proxy_pass http://localhost:8090/;

            proxy_set_header Host $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;
        }

    }
 
3. 服务器前台打包放置路径
 
 
html下面建立app1文件夹，将打包好的dist.zip 解压到app1下面
 
最最最重要的是：必须把dist目录下的内容拷贝到 app1目录，否则访问报错forbidden
 
cd /usr/local/nginx/html/app1
cp -r dist/*  ./
 
app2部署方式，和app1类似，触类旁通，聪明的你，肯定已经学会了！
 
 
 
脚下留心
 
 
我也是摸石头过河，一个一个坑踩过来的，用了最最简陋的配置办法进行配置；
 
 
如有其他优化配置办法，期待您的分享。1206157433@qq.com
 

 
文章目录
 
一、前言
二、上传dist文件
三、配置nginx.cnf

 
一、前言
 
一个服务器需要部署多个前端项目 
  
比如需要一个企业官网
比如需要一个管理系统
 
这时候一个Nginx要怎么配置多个前端项目呢
本文详细讲解： 通过不同域名的方式来部署多个项目 
  
访问www.xxx.com到企业官网
访问iot.xxx.com到管理系统
 
 
二、上传dist文件
 
dist是Vue生成的部署文件，上传到云端
 
 
三、配置nginx.cnf
 
企业官网部署view_dist
管理系统部署iot_dist
通过两个server，通过server_name来区分
 
vim /usr/local/nginx/conf/nginx.conf
cd /usr/local/nginx/sbin/
./nginx -s reload
 
    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;
        #access_log  logs/host.access.log  main;

        
		location / {
			root   /root/software/view_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;
        }
    }
	
	server {
        listen       80;
        server_name  iot.xxx.com;

        #charset koi8-r;
        #access_log  logs/host.access.log  main;

        
		location / {
			root   /root/software/iot_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;
        }
    }
 
觉得好，就一键三连呗（点赞+收藏+关注）