使用vite搭建vue3项目

vite

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

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

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

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

创建项目

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

shell 复制代码

npm create vite@latest

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

TypeScript
JSX
Vue Router
Pinia
ESLint
Prettier

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

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

安装依赖。

shell 复制代码

npm install

启动本地服务。

shell 复制代码

npm run dev

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

shell 复制代码

npm run build

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

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

shell 复制代码

  "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 文件的内置支持

shell 复制代码

# .scss and .sass
npm add -D sass

# .less
npm add -D less

# .styl and .stylus
npm add -D stylus

自动引入 api

安装依赖

shell 复制代码

npm i -D unplugin-auto-import

配置 node 环境的 tsconfig 和 types。

shell 复制代码

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

修改 vite.config.ts

typescript 复制代码

// 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"。

json 复制代码

{
  "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 文件中已声明。

自动引入组件

安装依赖

shell 复制代码

npm i unplugin-vue-components -D

配置插件

typescript 复制代码

// vite.config.ts
import Components from 'unplugin-vue-components/vite'

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

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

自动生成路由

安装依赖

shell 复制代码

npm install -D vite-plugin-pages

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

typescript 复制代码

// router/index.ts
import { createRouter } from 'vue-router'
import routes from '~pages' 

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

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

添加到 vite.config.ts

typescript 复制代码

// vite.config.ts
import Pages from 'vite-plugin-pages'

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

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

typescript 复制代码

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

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

"/" : "pages/index.vue"
"/about" : "pages/about/index.vue"

webpack 迁移指南

加载资源文件

vue 复制代码

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

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

ini 复制代码

// .env.dev
VITE_SOME_KEY=123

获取配置

vue 复制代码

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

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

shell 复制代码

npm i vite-plugin-commonjs -D

添加到 vite.config.ts

ts 复制代码

// vite.config.ts
import commonjs from 'vite-plugin-commonjs';

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

使用 antd vue

安装

shell 复制代码

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

自动按需引入组件

ts 复制代码

// vite.comfig.ts
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';

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

vite 配置

请参考注释

ts 复制代码

// 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',
    },
});