白筱汐

想都是问题，做都是答案

0%

使用vite搭建vue3项目

发表于 更新于 分类于

vite

Vite下一代的前端工具链 ，为开发提供极速响应。

Vite（法语意为 “快速的”，发音 /vit/，发音同 “veet”）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

  • 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
  • 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

根据 vite 官网的介绍，我们需要把握两个重点，一个是 esbuild,另一个就是 Rollup。

创建项目

执行命令，选择自定义配置。

1
npm create vite@latest

为了搭建一个通用型的 vue 项目，我们需要勾选的项目包括：

  • TypeScript
  • JSX
  • Vue Router
  • Pinia
  • ESLint
  • Prettier

其他选项可以根据需求添加。

下载完成之后，项目的目录结构如下：

目录结构

安装依赖。

1
npm install

启动本地服务。

1
npm run dev

项目打包，生成文件到 dist 目录。

1
npm run build

查看 scripts , 发现 “build” 命令执行 “run-p type-check build-only”。

“run-p” 是包 “npm-run-all”,提供的命令，代表并行执行后面的命令。另外”run -s”,代表串行执行命令。

1
2
3
4
5
6
7
8
9
"scripts": {
  "dev": "vite",
  "build": "run-p type-check build-only",
  "preview": "vite preview",
  "build-only": "vite build",
  "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
  "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
  "format": "prettier --write src/"
},

项目启动成功之后，查看终端，访问 http://127.0.0.1:5173/。

本地服务启动成功

插件使用

除了官方提供的插件，vite 社区还提供了很多优秀的插件 社区插件地址。

CSS 预处理器

Vite 提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持

1
2
3
4
5
6
7
8
# .scss and .sass
npm add -D sass

# .less
npm add -D less

# .styl and .stylus
npm add -D stylus

自动引入 api

安装依赖

1
npm i -D unplugin-auto-import

配置 node 环境的 tsconfig 和 types。

1
npm add -D @tsconfig/node18 @types/node@18

修改 vite.config.ts 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite';

// 省略无关代码
...

// 配置插件
export default defineConfig({
    plugins: [
        vue(),
        vueJsx(),
        AutoImport({
            // 支持自动导入 api 规则的相关文件
            // 默认支持 .ts, .tsx, .js, .jsx .vue
            include: [
                /\.[tj]sx?$/, // ts, .tsx, .js, .jsx
                /\.vue$/,
                /\.vue\?vue/, // .vue
                /\.md$/ // .md
            ],
            imports: ['vue', 'vue-router', 'pinia'] // 自动导入vue、vue-router、pinia 内的部分api
        }),
    ],
})

现在 unplugin-auto-import 会帮我们自动在根目录下生成一个 auto-imports.d.ts 文件，该文件包含的是我们配置 vue、vue-rouetr、pinia 里面一些 api 的 ts 类型声明。

修改根目录下的 tsconfig.app.json 文件,在 include 里面新增 “auto-imports.d.ts”。

1
2
3
4
5
6
7
8
{
  "include":[
    "env.d.ts",
    "src/**/*",
    "src/**/*.vue",
    "auto-imports.d.ts" 
  ]
}

进入 src/components/HelloWorld.vue , 修改代码做测试。

如图所示：

修改代码

插件自动帮助我们引入了 “ref” 方法，类似的其他在 vue、vue-router、pinia 中的 api 都会自动引入，前提是它在 auto-imports.d.ts 文件中已声明。

自动引入组件

安装依赖

1
npm i unplugin-vue-components -D

配置插件

1
2
3
4
5
6
7
8
9
10
11
12
// vite.config.ts
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
      Components({
          // 自动加载组件的目录配置,默认的为 'src/components'
          dirs: ['src/components'],
          extensions: ['vue'] // 组件的有效文件扩展名
      })
  ],
})

项目自动引入 src/components 目录下的组件，我们删除相关代码，依旧正常运行。

删除组件引入

自动生成路由

安装依赖

1
npm install -D vite-plugin-pages

插件根据文件目录自动生成路由，我们来修改路由配置

1
2
3
4
5
6
7
8
// router/index.ts
import { createRouter } from 'vue-router'
import routes from '~pages' 

const router = createRouter({
  // ...
  routes,
})

在 src 下面新建 pages 文件，然后把原来在 views 里面的组件移动到里面，具体如下

修改路由配置

ps:在 pages 目录里面新建 […all].vue 文件代表匹配 404 路径的路由页面。

添加到 vite.config.ts 

1
2
3
4
5
6
7
8
9
10
// vite.config.ts
import Pages from 'vite-plugin-pages'

export default defineConfig({
    plugins: [
        vue(),
        Pages(),
        // ...
    ],
})

添加类型到 vite-env.d.ts

1
2
// vite-env.d.ts
/// <reference types="vite-plugin-pages/client" />

最后页面生成的路由如下：

  • “/“ : “pages/index.vue”
  • “/about” : “pages/about/index.vue”

webpack 迁移指南

加载资源文件

1
2
import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

启动模式

通过设置 –mode dev，可以读取 .env.dev 的配置

将 VUE_APP_ 的前缀改为 VITE_,这样才能暴露给 vite

1
2
// .env.dev
VITE_SOME_KEY=123
1
2
// 获取启动模式
import.meta.env.MODE;

具体配置请参考 模式

获取配置

1
console.log(import.meta.env.VITE_SOME_KEY) // 123

vite 本地服务使用 es module,无法加载 commonjs 模块，需要安装插件处理

1
npm i vite-plugin-commonjs -D

添加到 vite.config.ts

1
2
3
4
5
6
7
8
9
// vite.config.ts
import commonjs from 'vite-plugin-commonjs';

export default defineConfig({
    plugins: [
        commonjs()
        // ...
    ]
})

使用 antd vue

安装

1
npm install ant-design-vue@4.x --save

自动按需引入组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// vite.comfig.ts
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
    plugins: [
        // ...
        Components({
            resolvers: [
                AntDesignVueResolver({
                    importStyle: false, // css in js
                }),
            ],
        }),
    ],
});

vite 配置

请参考注释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// vite.config.ts
import { fileURLToPath, URL } from 'node:url';

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

import AutoImport from 'unplugin-auto-import/vite';

import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';

import Components from 'unplugin-vue-components/vite';
import Pages from 'vite-plugin-pages';

import commonjs from 'vite-plugin-commonjs';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        commonjs(),
        vue(),
        vueJsx(),
        Pages(), // 自动生成路由
        AutoImport({
            // 支持自动导入 api 规则的相关文件
            // 默认支持 .ts, .tsx, .js, .jsx .vue
            include: [
                /\.[tj]sx?$/, // ts, .tsx, .js, .jsx
                /\.vue$/,
                /\.vue\?vue/, // .vue
                /\.md$/ // .md
            ],
            imports: ['vue', 'vue-router', 'pinia'] // 自动导入vue、vue-router、pinia 内的部分api
        }),
        Components({
            // 自动加载组件的目录配置,默认的为 'src/components'
            dirs: ['src/components'],
            extensions: ['vue'], // 组件的有效文件扩展名
            resolvers: [
                // 自动加载 antd 组件
                AntDesignVueResolver({
                    importStyle: false // css in js
                })
            ]
        })
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    server: {
        open: true, // 自动打开到浏览器
        port: 8080, // 修改默认启动端口
        proxy: {
            // 配置代理服务
            '/api': {
                target: 'http://jsonplaceholder.typicode.com',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    },
    build: {
        sourcemap: true // 生成 sourcemap 文件
        // 发布时去除 console
        // terserOptions: {
        //   compress: {
        //     drop_console: true
        //   }
        // },
        // minify: 'terser',
    },
});