💯💯💯小白部署之Vue3+Vite二级目录部署教程

背景

上周新开发了一个xxx作业提交系统为了完成主门户平台上培训班得收作业功能，开发过程还是相对简单的，但是开发完成之后需要部署到门户网站的二级目录下，因为是第一次部署到二级目录，还是总结一下部署流程吧！

技术栈

项目采用vue3+vite+ts构建，下边给大家带来具体的部署教程：

1. 配置.env环境变量

1. 项目根目录下新建.env.development文件

# 设置开发环境环境变量
VITE_ENV = 'development'
VITE_APP_PREFIX ='/'

2. 项目根目录下新建.env.production文件

# 设置生产环境环境变量
VITE_ENV = 'production'
VITE_APP_PREFIX ='/modelTrainingCourse/submission'

3. 修改package.json

  "scripts": {
    "dev": "vite --mode development",
    "build": "vue-tsc -b && vite build --mode production",
    "preview": "vite preview"
  },

注意：

1. vite项目中的环境变量必须以VITE_开头，否则无效
2. package.json需要通过--mode 传入环境变量

2. 配置路由前缀

修改src/router/index.ts文件

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

注意：

1. 利用import.meta.env.VITE_APP_PREFIX取到路由前缀环境变量，进行配置

3. 配置请求前缀

修改/src/api/axios.ts文件

  const axiosInstance: AxiosInstance = axios.create({
    baseURL:`${import.meta.env.VITE_AXIOS_PREFIX}/api/`,
    timeout: 200000,
  });

注意：

1. 利用import.meta.env.VITE_AXIOS_PREFIX取到请求前缀环境变量，进行配置

4. 配置vite.config.js

由于vite项目的启动顺序，我们无法在vite.config.js直接获取，但是官方提供了loadEnv(mode,process.cwd())进行获取，具体配置如下：

import { defineConfig,loadEnv  } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd())
  return {
    plugins: [vue()],
    base: env.VITE_APP_PREFIX, 
    server: {
      host: '0.0.0.0',
      port: 8081,
      open: true,
      proxy: {
        '/api': {
          target: 'http://localhost:8888/',
          changeOrigin: true,
          rewrite: function (path) {
            return path.replace(/^\/api/, '');
          }
        }
      }
    },
    resolve: {
      //别名配置，引用src路径下的东西可以通过@如：import Layout from '@/layout/index.vue'
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  };
});

5.项目打包

终端运行命令npm run build ，我们将打包产生的dist文件夹，直接复制到我们服务的目标目录下

6. Nginx 配置

1. 对nginx的conf/nginx.conf进行修改

    location /modelTrainingCourse/submission/ {
	    # 配置二级路由时需要使用别名alias,不使用root  
        alias  html/modelTrainingCourse/;  
        index  index.html index.htm;  
        # 若不配置try_files，history模式下刷新会404
        try_files $uri $uri/ /modelTrainingCourse/index.html;  
    }

2. 代理跨域问题

    location /api/ {  
        proxy_pass http://xxx.xxx.xxx.xxx:8888/;  
    }

注意：

1. 针对于Nginx部署的相关事项，后续会不断补充

结尾

以上我们就完成了二级目录的部署的全过程，而针对更复杂的场景，例如三级或更多目录相信只是在二级目录的基础想做进一步的拓展罢了，以此类推....
文章如有不对的地方，欢迎在评论区留言！！！

---

文章推荐

1. Vite6 +TypeScript+React18+Tailwind+ESlint+Prettier+Husky搭建企业级前端项目