vite + vue 二级域名部署遇到的问题

vite + vue 二级域名部署遇到的问题

在工作中，有时会遇到将项目发布到二级域名下的情况，故需要配置 公共基础路径

1. 在根目录新建 .env.production文件和.env.development文件

// .env.production
NODE_ENV = production
VITE_BASE_PATH = /basePatn/

// .env.development
NODE_ENV = development
VITE_BASE_PATH = /

2. vite.config.ts 配置 base

import { ConfigEnv, defineConfig, loadEnv } from "vite";
import legacy from "@vitejs/plugin-legacy";
import { createVuePlugin } from "vite-plugin-vue2";
import copy from 'rollup-plugin-copy';

export default ({ command, mode }: ConfigEnv) => {
  const env = loadEnv(mode, process.cwd());
  return defineConfig({
    base: env.VITE_BASE_PATH,
    plugins: [],
    server: {},
  })
}

3. router配置

// vue2
export const router = new VueRouter({
  base: import.meta.env.VITE_BASE_PATH as string,
  mode: 'history',
  routes: [],
});

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

4. package.json

  "scripts": {
    "dev": "vite --mode development",
    "build": "vite build --mode production",
    ...
  },

配置之后 执行npm run build，使用nginx配置及部署之后发现问题，部分图片路径错误，部分文件找不到，查找问题得出结论：
index.html 中的链接自动加上了/basePatn/前缀，组件中的html部分，静态图片链接没有加上前缀，js部分文件没有加上前缀，css部分文件背景图片都加上了前缀。

原因就是所的图片和文件都放在了静态文件夹public/assets中,引入使用的是绝对路径 /assets/xxx/xxx; vite打包时没有对组件html中的静态文件处理。

解决方案，组件中的html部分图片链接使用别名，如@p/assets/xxx。别名需要在vite.config.ts中配置。js部分中需要引入静态文件，如图片，json文件等，在前面拼接上 import.meta.env.BASE_URL，如${import.meta.env.BASE_URL}assets/xxxx;

vite.config.ts详细配置如下

import { ConfigEnv, defineConfig, loadEnv } from "vite";
import legacy from "@vitejs/plugin-legacy";
import { createVuePlugin } from "vite-plugin-vue2";
import copy from 'rollup-plugin-copy';

export default ({ command, mode }: ConfigEnv) => {
  const env = loadEnv(mode, process.cwd());
  return defineConfig({
    base: env.VITE_BASE_PATH,
    build: {
      // 可以配置设置了基础路径和没有配置基础路径打包文件夹不一样，容易区分
      outDir: env.VITE_BASE_PATH && env.VITE_BASE_PATH.length > 2 ? 'baseDist' : 'dist',
    },
    resolve: {
      alias: [ // 文件系统路径别名
        {
          find: '@',
          replacement: '/src'
        },
        {
          find: '@p',
          replacement: '/public'
        }
      ],

    },
    plugins: [
      createVuePlugin(),
      legacy(),
     
    ],
    server: {
      host: true,
      port: 8000,
      proxy: {
        // 这里可以配置转发,根据配置的公共路径自动匹配
        [`^${env.VITE_BASE_PATH}api`]: {
          target: 'https://xxx/xxx',
          changeOrigin: true,
          rewrite: (path) => path.replace(new RegExp(`^${env.VITE_BASE_PATH}api`), ""),
          hostRewrite: "xxx/xxx",
         
        },
      
        
      },
    },
  })
}

nginx 部分配置

	server {
        	listen       4801;
	        server_name  127.0.0.1;

        	#charset koi8-r;

	        #access_log  logs/host.access.log  main;
          
    location /basePatn {
      # alias html/basePatn/;
      alias /home/xxx/basePatn/;
      index  index.html index.htm;
      proxy_buffer_size 5120k;
      proxy_buffers 4 5120k;
      proxy_busy_buffers_size 5120k;
      proxy_temp_file_write_size 5120k;
      try_files $uri $uri/ /basePatn/index.html;
	  }
		
		location /basePatn/api/ {
			proxy_pass https://xxx/xxx;
			proxy_buffer_size 51200k;
        proxy_buffers 4 51200k;
        proxy_busy_buffers_size 51200k;
        proxy_temp_file_write_size 51200k;
        client_max_body_size 20M;
    }
              
  }

打包，发布之后基本没有发现什么问题，如有好的方式请指教。