域名包括二级路径，配置VUE中vite

通常情况下我们将vue打包后，直接放置nginx或者tomcat等容器里，配置下相关路径文件就可以访问了。
但是当我们使用域名的二级路径访问时，如https://abc.com/cesium/，会报404错误，这是因为一些静态文件路径为域名+文件形式，导致找不到文件，例如index.html中的文件为/assets/index-9a873818.js,导致直接拼接了域名。
接下来需要在工程中做相关配置
1、增加开发环境文件.env.development,添加以下内容

1
2
##开发环境
VITE_BASE_PATH='/'

2、增加生产环境文件.env.production,添加以下内容

1
2
#生产环境
VITE_BASE_PATH=/cesium/

3、修改package.json中的dev和build命令为：

1
2
"dev": "vite serve --mode development",
"build": "vite build --mode production",

4、安装dotenv模块，

1
yarn add dotenv

5、在vite.config.js中增加

1
2
3
4
5
6
import dotenv from 'dotenv';
dotenv.config({ path: `.env.${process.env.NODE_ENV}` });
//添加base
export default defineConfig({
    base: process.env.VITE_BASE_PATH,
})

另外附nginx一般配置,

1
2
3
4
5
location cesium/ {
    root html/cesium/;
    try_files $uri $uri/ /index.html;
    index  index.html index.htm;
}

注意文件夹名要和域名二级路径一致，不然需要在index.html前指定文件夹名称，如下

1
2
3
4
5
location cesium/ {
    root html/test/;
    try_files $uri $uri/ test/index.html;
    index  index.html index.htm;
}