#ts #vite #vite-2 #vue3 #typescript

vite2 实战配置

简介：新项目，新气象，选择了激进的技术栈，vite2 常用配置。

项目目录

1
.
2
├── README.md
3
├── build.sh #打包脚本
4
├── commitlint.config.js
5
├── index.html
6
├── mock #mock
7
│   ├── index.ts
8
│   └── list.ts
9
├── package.json
10
├── postcss.config.js
11
├── public #静态文件
12
│   ├── data.json
13
│   ├── favicon.ico
14
│   └── tinymce
15
├── src
16
│   ├── App.vue #根组件
17
│   ├── api  #接口
18
│   ├── assets #资源
19
│   ├── components #组件
20
│   ├── hooks #hooks
21
│   ├── icons #svg图标
22
│   ├── layout #页面布局
23
│   ├── locales #国际化配置
24
│   ├── main.ts #项目入口
25
│   ├── permission.ts #权限处理，导航守卫
26
│   ├── plugins #插件，包含指令，UI库等
27
│   ├── router #路由
28
│   ├── store #数据仓库
29
│   ├── styles #全局样式和样式变量
30
│   ├── types #ts类型
31
│   ├── utils #工具函数
32
│   └── views #页面
33
├── tsconfig.json #ts项目配置
34
├── update.sh #提交代码脚本
35
├── vite.config.ts #vite项目配置
36
└── yarn.lock

vite.config.ts

1
import { resolve } from 'path'
2
import { defineConfig, loadEnv, UserConfigExport, ConfigEnv } from 'vite'
3
import vue from '@vitejs/plugin-vue'
4
import legacy from '@vitejs/plugin-legacy'
5
import html from 'vite-plugin-html'
6
import viteSvgIcons from 'vite-plugin-svg-icons'
7
import viteCompression from 'vite-plugin-compression'
8
import { viteMockServe } from 'vite-plugin-mock'
9
10
const pathResolve = (dir: string): string => resolve(__dirname, '.', dir)
11
12
// https://vitejs.dev/config/
13
const config = ({ command, mode }: ConfigEnv): UserConfigExport => {
14
  // 环境变量
15
  const env = loadEnv(mode, process.cwd())
16
  // 生产环境判断
17
  const isEnvProduction = mode === 'production'
18
  // vite插件
19
  const plugins = [
20
    vue(),
21
22
    /**
23
     *  注入环境变量到html模板中
24
     *  如在  .env文件中有环境变量  VITE_APP_TITLE=admin
25
     *  则在 html模板中  可以这样获取  <%- VITE_APP_TITLE %>
26
     *  文档：  https://github.com/anncwb/vite-plugin-html
27
     */
28
    html({
29
      inject: {
30
        injectData: { ...env }
31
      },
32
      minify: true
33
    }),
34
35
    /**
36
     *  把src/icons 下的所有svg 自动加载到body下，供组件使用
37
     *  类似于webpack中的svg-sprite-loader
38
     *  文档：https://github.com/anncwb/vite-plugin-svg-icons
39
     */
40
    viteSvgIcons({
41
      // 指定需要缓存的图标文件夹
42
      iconDirs: [resolve(process.cwd(), 'src/icons')],
43
      // 指定symbolId格式
44
      symbolId: 'icon-[name]'
45
    })
46
  ]
47
48
  if (isEnvProduction) {
49
    plugins.push(
50
      // 兼容插件
51
      legacy({
52
        targets: ['defaults', 'not IE 11']
53
      }),
54
55
      // gzip插件，打包压缩代码成gzip  文档： https://github.com/anncwb/vite-plugin-compression
56
      viteCompression()
57
    )
58
  } else {
59
    plugins.push(
60
      // mock  文档：https://github.com/anncwb/vite-plugin-mock
61
      viteMockServe({
62
        mockPath: 'mock',
63
        localEnabled: command === 'serve',
64
        logger: true
65
      })
66
    )
67
  }
68
  
69
  return defineConfig({
70
    // 基础路径，配合vue-router的createWebHashHistory使用
71
    base: './',
72
    plugins,
73
    define: {
74
      // setting vue-i18-next
75
      // Suppress warning
76
      __VUE_I18N_LEGACY_API__: false,
77
      __VUE_I18N_FULL_INSTALL__: false,
78
      __INTLIFY_PROD_DEVTOOLS__: false
79
    },
80
    server: {
81
      port: 8888,
82
      open: true
83
    },
84
    // alias 现在会被传递给 @rollup/plugin-alias 并不再需要开始/结尾处的斜线了。
85
    // 此行为目前是一个直接替换，所以 1.0 风格的目录别名需要删除其结尾处的斜线：
86
    resolve: {
87
      alias: [
88
        { find: '@', replacement: pathResolve('src') },
89
        // 解决警告You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.
90
        {
91
          find: 'vue-i18n',
92
          replacement: 'vue-i18n/dist/vue-i18n.cjs.js'
93
        }
94
      ]
95
    },
96
    build: {
97
      target: 'es2015',
98
      outDir: 'dist',
99
      assetsDir: 'assets',
100
      assetsInlineLimit: 2048,
101
      cssCodeSplit: true,
102
      // Terser 相对较慢，但大多数情况下构建后的文件体积更小。ESbuild 最小化混淆更快但构建后的文件相对更大。
103
      minify: !isEnvProduction ? 'esbuild' : 'terser',
104
      terserOptions: {
105
        compress: {
106
          // 生产环境去除console
107
          drop_console: isEnvProduction
108
        }
109
      }
110
    }
111
  })
112
}
113
114
export default config

参考链接

1.https://cn.vitejs.dev/

#ts #vite #vite-2 #vue3 #typescript