Vite工程-1｜搭建vite前端工程并熟悉vite配置

搭建Vite项目

搭建一个基于Vite工程的Vue3项目

创建项目并安装依赖

初始化vite项目并安装依赖

$ yarn create vite vite-test && cd vite-test && yarn

控制台输出如下，注意中途需要选择Vue框架的操作

yarn create v1.22.17
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Installed "create-vite@2.8.0" with binaries:
      - create-vite
      - cva
✔ Select a framework: › vue
✔ Select a variant: › vue

Scaffolding project in /Users/bj00031ml/Github/vite-test...

Done. Now run:

  cd vite-test
  yarn
  yarn dev

✨  Done in 4.72s.
yarn install v1.22.17
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 8.33s.

本地开发和项目打包

在package.json中的scripts中自带了三个命令，用于本地开发、生产构建和构建预览等

# 本地开发
yarn dev
# 生产构建
yarn build
# 构建预览
yarn preview

通过运行yarn dev可以在浏览器里访问项目了，默认端口是3000。

配置工程

上一步只是搭建了空白模板，现在开始配置下工程，使它更贴合实际业务开发。通过vite.config.js可以对工程进行配置，而且修改配置会自动出发重启，不需要手动重启，这一点还是比较赞。

基础配置

base 公共基础路径，用Vue-cli的时候也会经常使用
plugins 配置插件，vite基于rollup，因此可以使用rollup的插件
publicDir 静态资源文件夹，一般也不会改动它。
resolve.alias 路径的别名，像Vue2经常用的@、_c等
envDir 加载 .env 文件的目录，可以不用写在根目录了\

目前先用这些配置，其他配置根据需求在添加。

export default defineConfig({
  base: '/',
  plugins: [vue()],
  publicDir: 'public',
  resolve: {
    alias: {
      '@': './src',
    }
  },
  envDir: './config'
}

开发服务器

接口代理，端口等等也是比较常用的，通过server配置项进行配置

server.host 指定服务器应该监听哪个 IP 地址
server.port 指定开发服务器端口
server.proxy为开发服务器配置自定义代理规则

export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: 8080,
    proxy: {
      '/api': 'http://localhost:8001',
    }
  }
})

构建配置

对于构建常用的配置：

build.outDir 指定输出路径
build.assetsDir 静态资源的存放路径
build.sourcemap 构建后是否生成 source map 文件。

export default defineConfig({
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: false
  }
})

这里需要注意的是所有代码构建都会以 支持原生 ESM script 标签的浏览器 为目标。

传统浏览器可以通过插件 @vitejs/plugin-legacy 来支持，它将自动生成传统版本的 chunk 及与其相对应 ES 语言特性方面的 polyfill。兼容版的 chunk 只会在不支持原生 ESM 的浏览器中进行按需加载。

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ],
})

环境变量

上述配置修改了读取环境变量的位置，所以在config中进行环境变量定义。创建.env.local

VITE_BASE_URL=https://baidu.com

需要注意的是：js中通过import.meta.env进行环境变量的获取

写在最后

体验下来感觉就是vite对rollup进行了封装，和vue-cli对webpack封装一层差不多的。对于做业务不喜欢折腾的属于开箱即用，若喜欢自己折腾感觉vite不是很好玩，还是rollup、snowpack等比较好玩。

至此，对于功能基本的配置就算完了，但是还有eslint、css预处理器、分包等等还没有做，后续在继续探索。