Vue3+Vite Nginx部署 跨域

打包项目

webstorm打开项目之后，在Terminal执行打包命令

pnpm run build:prod
 

复制到Nginx

打包完成之后,生成的包在根目录dist，把dist目录拷贝到Nginx放网站目录下：\nginx-1.25.2\html\divided ，dist改名了divided

修改配置， nginx-1.25.2\conf\nginx.conf, 增加站点divided：端口用8085,增加跨域配置

 server {
       listen       8085;
       listen       localhost:8085;
       server_name  192.168.1.207  alias  aserver;
        location / {
           root   html/divided;
           index  index.html index.htm;
       }
         #  跨域
        location /prod-api {
           proxy_pass http://192.168.1.2/api;
        }

    }

运行

重启nginx,浏览器运行：http://192.168.1.207:8085/

Web默认80端口，二级路由 访问

.env.production文件

##生产环境
NODE_ENV='production'
VITE_BASE_PATH=/web/

.env.development文件

##开发环境
NODE_ENV='development'
VITE_BASE_PATH='/'
 

配置路由文件router/index.js

const router = createRouter({
  history: createWebHistory(import.meta.env.VITE_BASE_PATH),
  routes
})

 
配置vite.config.js

import { defineConfig, loadEnv } from 'vite';
export default defineConfig(({ command, mode }) => {
    const env = loadEnv(mode, process.cwd(), '');
    return {
        base: env.VITE_BASE_PATH,
    }
});

 
nginx配置文件

server {
  listen       80;
  location /web {
    #二级路由时需要使用别名alias，不用root
    alias html/dist/;
    index  index.html;
    #若不配置try_files，刷新会404
    try_files $uri $uri/ /web/index.html;
  }