多个vue项目部署到nginx服务器

文章目录

需求
一、项目打包
二、nginx配置

需求

同一个域名安装多个vue项目。

比如：域名为 https://domain.com + 后缀。那么通过不同的后缀就能去访问不同的项目地址。

https://domain.com，不加任何后缀，访问官网。

https://domain.com/admin，域名加上 /admin，就访问管理后台项。

https://domain.com/user，加上 /user，就访问用户端项目。

一、项目打包

需要注意的文件就两个。request.JS和vue.config.JS。

在env文件中设置VUE_APP_CONTEXT_PATH为/admin/

1.vue.config.js

js 复制代码

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

2.request.js文件

在router文件夹中index.js文件中修改base为 '/admin/'

js 复制代码

export default new Router({
  base: process.env.VUE_APP_CONTEXT_PATH, //调整这里，路径跟publicPath保持一致即可
  mode: 'history', // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

3.打包

1.执行npm run build。可能不一定为build，具体执行命令看package.json的下面这个字段。

调整完毕后，直接执行build打包命令，可以发现index.html引入js路径增加了/admin

js 复制代码

<script src=/admin/static/js/chunk-libs.c52f1d1f.js></script>
<script src=/admin/static/js/app.15183e6d.js></script>

2.将打包好的文件上传到服务器，一般存在于dist文件夹，具体文件夹位置看命令行的提示。

在服务器上找个文件夹直接丢上去。/www/wwwroot/XXXXXX(项目总域名名字)/app/XXXXX(单个项目名字)。不喜欢可自行发挥，尽量保证这些项目在同一文件下。

二、nginx配置

nginx配置服务，使不同请求地址，去找相应的项目。

我这里使用的宝塔部署(图省事)自己部署也是一样的。

bash 复制代码

server
{
    listen 80;
    server_name 这里填写你的域名;
    #重定向某个地址
 # 这个是第一个vue项目 页面访问地址 http://域名/
    location / {
        return 302 /admin/select;#我这里是重定向到/admin项目的select页面
    }
#正常部署第一个项目
    # 这个是第一个vue项目 页面访问地址 http://域名/
    location / {
         root   /www/wwwroot//dist;
         index  index.html;
         try_files $uri $uri/ /index.html;
    }

     # 这个是第二个vue项目 页面访问地址 http://域名/admin
    location /admin {
        alias /www/wwwroot/admin/dist;#这里是你的代码地址
        try_files $uri $uri/ /admin/index.html; #解决刷新404 这里的/admin和 location /admin 必须一致
    }
 # 这个是第三个vue项目 页面访问地址 http://ip:9001/user
    location /user {
        alias /www/wwwroot/user/dist;#这里是你的代码地址
        try_files $uri $uri/ /user/index.html; #解决刷新404 这里的/user和 location /user 必须一致
    }
    # 转发以 /prod-api 开头的请求到后端
    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://127.0.0.1:8080/;
    }
}

注意：如果页面中有二级路由的话，配置文件中一定不能用root，要用alias.

注意如果你也如果配置文件中有一下内容请注释

bash 复制代码

    # location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    # {
    #     expires      30d;
    #     error_log /dev/null;
    #     access_log /dev/null;
    # }

    # location ~ .*\.(js|css)?$
    # {
    #     expires      12h;
    #     error_log /dev/null;
    #     access_log /dev/null;
    # }