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,保持websocketlocation ^~/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;}}
}

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