Vue3在非服务器根目录下的嵌套目录部署项目

Vue3在非服务器根目录下的嵌套目录部署项目

• 在.env.development和.env.production分别设置不同的参数VITE_BASE_PATH

# 开发环境  
# 基础路径，即项目部署在服务器的路径，如果项目不是部署在服务器的根路径，则需要设置此参数，此参数在vite.config.ts中使用到
# 开发环境直接设为/就可以了
VITE_BASE_PATH=/

# 生产环境
# 基础路径，即项目部署在服务器的路径，如果项目不是部署在服务器的根路径，则需要设置此参数，此参数在vite.config.ts中使用到
VITE_BASE_PATH=/demo/

• 在vite.config.ts中将VITE_BASE_PATH的值设置到base属性

import { fileURLToPath, URL } from 'node:url'

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default (({ mode }: {mode: string}) => {
  const env = loadEnv(mode, process.cwd());
  return defineConfig({
    plugins: [
      vue(),
      vueJsx(),
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    // 基础路径，即项目部署在服务器的路径，如果项目不是部署在服务器的根路径，则需要设置此参数
    base: env.VITE_BASE_PATH
  });
})

• 如果路由用的是history模式，则也需要使用import.meta.env.BASE_URL（即vite.config.ts中设置的base）或者import.meta.env.VITE_BASE_PATH进行配置

import { createRouter, createWebHistory } from 'vue-router';

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

export default router

• Nginx服务器配置回退路由，这样/demo/开头的所有请求如何找不到对应的路径都会转到/demo/index.html，如果不配置回退路由可能回出现访问页面空白问题。

location /demo/ {
  try_files $uri $uri/ /demo/index.html;
}

按如上步骤操作好后，则可以使用 num run build 命令默认按 .env.production 进行打包，打包出来的js、css引用路径都会自动包含设置好的基础路径。

此时可以使用如 http://127.0.0.1/demo 这样的路径访问项目。

num run build 命令和 vite build --mode production 命令作用相同。