vue run dev 配置nginx

由于项目有多个vue项目,在开发过程中需要联调,而不是每次发布后再联调. 比如有2个项目: main-project(主项目),test1-project. 由于是多项目,每个项目相当于有一个独立的域,这里test1-project设置域名称为test1

vue修改 

在vite.config.ts中配置一个base:"/test1/",

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

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
  ],
  base:"/test1/",
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

然后npm run dev, 默认启动地址是:  http://localhost:5173/test1/ ,这样相当于在原有的域名中添加了test1域.

无论是调试环境,还是build环境(将发布的文件放到服务器test1中也可以通过nginx配置)都可以使用.

nginx配置

nginx配置时遇到1个问题, vue加载非常慢,后面更新了nginx版本解决的.

http://nginx.org/download/nginx-1.24.0.zip

worker_processes 1;
events {
    worker_connections 1024;
}

http {
    include mime.types;
    default_type application/octet-stream;
    sendfile on;
    keepalive_timeout 65;
    gzip on;
	gzip_comp_level 2;
	gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss;	
	access_log  off;
    error_log off;	

    server {
        listen 8081;
        expires -1;
        server_name localhost;
        client_max_body_size 100m;
        #proxy_set_header Host $http_host;
		
		proxy_set_header Cookie $http_cookie;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;   
      
		#test1-project配置,注意地址有test1,保持websocket
		location ^~/test1/ {		
			proxy_pass http://localhost:5173/test1/;	
			proxy_http_version 1.1;
			proxy_set_header Upgrade $http_upgrade;
			proxy_set_header Connection "upgrade";
		}		

		#main-project的配置
		location ^~/ {		
			proxy_pass http://localhost:5173/;	
			proxy_http_version 1.1;
			proxy_set_header Upgrade $http_upgrade;
			proxy_set_header Connection "upgrade";
		}

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
            root html;
        }

    }
}

这样配置后,也可以实现代码保存界面马上更新的效果.