vite build 发布到nginx二级目录——将yudao-ui-go-view打包、部署到big目录下

1、修改配置

1）定义发布目录

在 yudao-ui-go-view\types\vite-env.d.ts文件中增加发布目录路径定义：VITE_PUBLISH_PATH，内容如下：

java 复制代码

/// <reference types="vite/client" />

interface ImportMetaEnv {
  // 端口
  VITE_DEV_PORT: string;
  // 开发地址
  VITE_DEV_PATH: string
  // 后端请求地址
  VITE_PRO_PATH: string
  // 发布目录
  VITE_PUBLISH_PATH: string
}

注意：这里最好以VITE_开头，vite为了安全对环境变量做了保护，否则变量可能无法暴露访问。

2）增加二级目录发布环境配置

.新增二级目录生产环境配置文件yudao-ui-go-view\.env.prod2，内容如下：

VITE_PRO_PATH 可以写ip/host地址形式，我这使用了代理，见 nginx 中的 location location /big/admin-api/

java 复制代码

# port
VITE_DEV_PORT = '3000'

# development 后端地址
# VITE_DEV_PATH = 'https://demo.mtruning.club'
VITE_DEV_PATH = 'http://127.0.0.1:48080'

# 后端地址，根据实际情况修改
VITE_PRO_PATH = '/big'      

# 应用发布目录
VITE_PUBLISH_PATH = '/big'

# 租户开关
VITE_APP_TENANT_ENABLE=true

# 验证码的开关
VITE_APP_CAPTCHA_ENABLE=true

（可选）新增生产环境配置文件yudao-ui-go-view\.env.prod，内容如下：

java 复制代码

# port
VITE_DEV_PORT = '3000'

# development path
# VITE_DEV_PATH = 'https://demo.mtruning.club'
VITE_DEV_PATH = 'http://127.0.0.1:48080'

# 后端地址，根据实际情况修改
VITE_PRO_PATH = '/' 

# 发布路径
VITE_PUBLISH_PATH = '/'

# 租户开关
VITE_APP_TENANT_ENABLE=true

# 验证码的开关
VITE_APP_CAPTCHA_ENABLE=true

（可选）新增开发环境配置文件yudao-ui-go-view\.env.dev，内容如下：

java 复制代码

# port
VITE_DEV_PORT = '3000'

# development path
# VITE_DEV_PATH = 'https://demo.mtruning.club'
VITE_DEV_PATH = 'http://127.0.0.1:48080'

# production path
VITE_PRO_PATH = 'https://demo.mtruning.club'

# 发布路径
VITE_PUBLISH_PATH = '/big'

# 租户开关
VITE_APP_TENANT_ENABLE=true

# 验证码的开关
VITE_APP_CAPTCHA_ENABLE=true

3）增加打包命令配置

在yudao-ui-go-view\package.json文件scripts节点下新增 build:prod2，修改dev，build，增加--mode参数

java 复制代码

"scripts": {
    "dev": "vite --host --mode dev",
    "build": "vue-tsc --noEmit && vite build --mode prod",
    "build:prod2": "vue-tsc --noEmit && vite build --mode prod2",
    "preview": "vite preview",
    "new": "plop --plopfile ./plop/plopfile.js",
    "postinstall": "husky install",
    "lint": "eslint --ext .js,.jsx,.ts,.tsx,.vue src",
    "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx,.vue src --fix"
  },

4）vite打包配置

在yudao-ui-go-view\vite.config.ts文件中修改defineConfig中的base,build.outDir，代码如下

java 复制代码

export default ({ mode }) => defineConfig({
  base: loadEnv(mode, process.cwd()).VITE_PUBLISH_PATH,
  // 路径重定向
  resolve: {
    ....
  },

  ...
  
  build: {
    target: 'es2015',
    outDir: OUTPUT_DIR + loadEnv(mode, process.cwd()).VITE_PUBLISH_PATH , // 输出目录,
    // minify: 'terser', // 如果需要用terser混淆，可打开这两行
    // terserOptions: terserOptions,
    rollupOptions: rollupOptions,
    brotliSize: brotliSize,
    chunkSizeWarningLimit: chunkSizeWarningLimit
  }

2、编译打包

在终端中执行 npm run build:prod2，会将编译结果放在yudao-ui-go-view\dist目录big子目录下，效果如图：

进入dist目录，可以直接压缩big目录为big.zip文件，后续上传部署到nginx服务中

3、配置nginx

配置管理后端代理及前端页面代理。

java 复制代码

        location /big/admin-api/ { ## 后端项目 - 管理后台
                proxy_pass http://127.0.0.1:48080/admin-api/; ## 重要！！！proxy_pass 需要设置为后端项目所在服务器的 IP
                proxy_set_header Host $http_host;
                proxy_set_header X-Real-IP $remote_addr;                                                                 
                proxy_set_header REMOTE-HOST $remote_addr;                                                               
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;                                             
        }                                                                                                                
                                                                                                                  
        location /big/ {                                                                                    
                try_files $uri $uri/ $uri/index.html /big/index.html;  #router = history                                 
        }

4、上传部署

在2、中的big.zip上传到nginx服务的根目录/var/www/html中，执行以下命令完成部署。

java 复制代码

cd /var/www/html
unzip big.zip
service nginx restart

部署情况如下，所有的路由前面都有一个二级目录big

本地开发环境之下 npm run dev，控制台输出如下：

按住ctrl 点击http://localhost:8000/big/打开浏览器访问效果：

本地开发环境，如果想不想用二级目录就在环境配置文件中配置VITE_PUBLISH_PATH='/'

本地开发环境，如果想不想用二级目录就在环境配置文件中配置VITE_PUBLISH_PATH='/'

本地开发环境，如果想不想用二级目录就在环境配置文件中配置VITE_PUBLISH_PATH='/'
============= 相关博文 ============

vue-cli build, vite build 生产部署刷新或弹窗404，页面空白修复方法

Ruoyi-vue-pro Vue + nginx 二级目录部署到云服务器

ruoyi-vue-pro优化------模块单独打包，增量更新、部署，告别等待

============= 相关博文 ============