vue3 Vite 2.0 Vue-Router 4.0 TypeScript elementPlus admin 须弥戒后台案例小结

清明节放假三天在家整整后台，用最新的vue3 Vite 2.0 Vue-Router 4.0 TypeScript elementPlus admin配置后台

如果是自己从头开始写，那么工作量是非常大的。这里直接使用 PanJiaChen的vue-element-admin后台

清除掉多余文件，只保留核心文件

预览地址

github地址预览

gitee地址预览

代码地址

github地址 https://github.com/foxiswho/vue3-vite2-ep-ts-nixujie

gitee地址 https://gitee.com/foxiswho/vue3-vite2-ep-ts-nixujie

处理

0. 创建环境,初始化相关目录和文件

# 创建 vue3-vite2-ep-ts-nixujie 初始化相关目录和文件
yarn create @vitejs/app vue3-vite2-ep-ts-nixujie --template vue
# 进入目录
cd vue3-vite2-ep-ts-nixujie
# 添加 typescript 支持
yarn add --dev typescript
# 使用 vue3
yarn global add @vue/cli@next
# 初始化包
yarn 
# 开发运行
yarn dev

1. 复制核心文件
2. 把js用ts（TypeScript）重写
3. 升级vue2代码为vue3代码
4. 打包方式改为vite2打包

升级过程中遇到的问题

vite获取本地环境变量开头

.env.development 等等文件，如果在项目中要使用import.meta.env获取配置变量，那么开头必须是VITE开头

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = '/dev-api'

VUE_APP_API_BASE_URL = http://localhost:3005
port = 3005

# VITE
VITE_APP_BASE_API = '/dev-api'
VITE_APP_BASE_URL =  http://localhost:3005
VITE_PORT = 3005

在使用vite2打包时，解决vite.config中 无法获取import.meta.env环境变量问题

根目录下 vite-env.ts 文件，专用于vite打包获取环境变量，其他地方不使用

import {loadEnv} from 'vite'
import {IEnv} from '@/type/store/interface'

/**
 *
 * @param mode 环境后缀 空| development | production
 * @returns {{appBaseUrl: (function(): string|string), portString: (function(): string|string), appBaseApi: (function(): string|string), port: (function(): number), env: (function(): {APP_BASE_API, APP_BASE_URL, PORT_STRING})}}
 */
export default (mode?: string) => {
  // console.log('mode',mode)
  if (!mode) {
    mode = ''
  }
  // console.log(process.argv)
  //获取本地环境文件
  let get = loadEnv(mode, process.cwd())
  let env: IEnv = {
    PORT: 3005,
    PORT_STRING: get.VITE_PORT || '3005',
    APP_BASE_API: get.VITE_APP_BASE_API || '',
    APP_BASE_URL: get.VITE_APP_BASE_URL || '',
  }
  env.PORT = parseInt(env.PORT_STRING)
  return {
    env: () => env,
    portString: () => env.PORT_STRING,
    port: () => env.PORT,
    appBaseApi: () => env.APP_BASE_API,
    appBaseUrl: () => env.APP_BASE_URL,
  }
}

在 vite.config.ts 文件中引入

import envVite from './vite-env'

把如下

export default defineConfig({

改动为

export default ({ mode }) => defineConfig({

这么做的原因是，获取 vite --mode development 编译时--mode参数中development环境变量

调用方式

envVite(mode).appBaseUrl()

完整vite.config.ts案例

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import envVite from './vite-env'

// import defaultSettings from '@/settings'
// https://vitejs.dev/config/
// @ts-ignore
export default ({ mode }) => defineConfig({
  publicDir: 'public',
  // base:'/', //默认顶级目录
  //base:'/vue3-vite2-ep-ts-nixujie', //二级目录
  resolve: {
    alias: [
      {find: '@', replacement: path.resolve(__dirname, 'src')}
    ]
  },
  server: {
    proxy: {
      '/api': {
        target: envVite(mode).appBaseUrl() || 'http://localhost:3001',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    },
    port: envVite(mode).port()
  },
  build: {
    sourcemap: true,
    manifest: true,
    rollupOptions: {
      output: {
        manualChunks: {
          'element-plus': ['element-plus'],
          echarts: ['echarts']
        }
      }
    },
    chunkSizeWarningLimit: 600
  },
  optimizeDeps: {
    // include: ['axios', 'nprogress', 'mockjs']
  },
  plugins: [vue(),],
  css: {
    postcss: {
      plugins: [
        require('autoprefixer'),
        require('tailwindcss'),
        require('postcss-nested'),
        require('postcss-simple-vars'),
        require('postcss-import')
      ]
    }
  }
})

router 路由中，name 不能有重名

否则造成无限死循环

参考：
https://www.jianshu.com/p/4973bd983e96

https://vitejs.dev/config/#conditional-config

https://github.com/vitejs/vite/issues/1930

https://github.com/hsiangleev/element-plus-admin