VUE3-设置多人协作开发环境和生产环境Nginx部署

开发环境

开发环境中，通常使用vue-cli脚手架或者vite方式进行管理，且通常情况下，开发环境往往有多个用户协作开发，每个人的环境参数（常用的如IP、端口等）各有差异，此时最便捷的方式是各自维护自用的配置文件，互不影响，否则会在git提交代码时配置文件相互覆盖或冲突。

在此例子中，假设目前有两个用户，lilei，hanmm。

vue-cli

创建配置

在项目主目录下，创建.env.lilei文件

NODE_ENV=development
VUE_APP_AXIOS_BASEURL=http://172.31.56.231:8107

.env.hanmm文件

NODE_ENV=development
VUE_APP_AXIOS_BASEURL=http://172.31.56.231:8108

注意如果是在js中需要调用的变量，需要以VUE_打头。

package.json

{
  "name": "vue3web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --port 8080",
    "lilei": "vue-cli-service serve --port 8081 --mode lilei",
    "hanmm": "vue-cli-service serve --port 8092 --mode hanmm",
    "build": "vue-cli-service build --mode prod"
  }
...
}

vue.config.js

如需使用，则为process.env.NODE_ENV

运行

npm run lilei
npm run hanmm

vite

创建配置

在项目主目录下，创建.env.lilei文件

NODE_ENV=development
VITE_APP_PORT=8081
VITE_APP_AXIOS_BASEURL=http://172.31.56.231:8107

.env.hanmm文件

NODE_ENV=development
VITE_APP_PORT=8082
VITE_APP_AXIOS_BASEURL=http://172.31.56.231:8108

注意如果是在js中需要调用的变量，需要以VITE_打头。

vite.config.js

示例：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig,loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

export default ({ mode }) => defineConfig({
    plugins: [vue()],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    server: {
      host: '0.0.0.0',
      port: loadEnv(mode, process.cwd()).VITE_APP_PORT,  //8080,
      proxy: {
        '/api': {
          target: loadEnv(mode, process.cwd()).VITE_APP_AXIOS_BASEURL, //'http://172.31.56.231:8091',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ''),
        }, 
      },
    },
});

package.json

{
  "name": "demo",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "vite",
    "dev:lilei": "vite --mode lilei",
    "dev:hanmm": "vite --mode hanmm",
    "build": "vite build",
    ...
  }
  ...
}

运行

npm run dev:lilei
npm run dev:hanmm

生产部署

生产环境下部署，通常是使用npm run build先对vue代码进行编译，生成html/css/js等文件，再通过nginx部署。
通常使用vue开发的前端，是与后端分离的，需要通过代理的方式将流量转发给后端服务器。在开发环境中，这一功能通常是配置在诸如vite.config.js等文件中，对于生产环境，此代理功能可由nginx实现。

例如，一个简单的nginx配置文件如下（nginx -c xxxx.conf启动nginx时指定配置文件）：

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/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  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        location / {
            autoindex off;
            root   /usr/share/nginx/html;
            index  index.html index.htm;
        }

        location /api/ {
            proxy_pass   http://172.31.56.231:18000/;
        }
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }

    }

}