vite 官网

初始构建运行

跟着官网构建完成后
yarn 拉取包后直接 yarn dev 无法运行起来
命令行显示

> Local: http://localhost:3000/ > Network: use `--host` to expose 

页面显示 Cannot GET /

原因：没有局域网中暴露服务
需要再 vite.config.ts 中添加配置

server: { host: '0.0.0.0' } 

添加后命令行显示

 > Network: http://192.168.52.1:3000/ > Network: http://192.168.142.1:3000/ > Local: http://localhost:3000/ > Network: http://172.17.12.99:3000/ 

可正常访问

配置 Eslint standard 规则

由于 vite 中没有帮我们引入 eslint 代码校验，所以我们需要自己手动配置 eslint
注意不要照抄 vue-cli 里的 .edlintrc.js 配置 其中一些引入的内容是针对 vue-cli 来的

需要安装的包

yarn add eslint eslint-plugin-vue eslint-config-standard eslint-plugin-import eslint-plugin-n eslint-plugin-promise @typescript-eslint/parser @typescript-eslint/eslint-plugin vite-plugin-eslint -D 

各包说明

//基础的 eslit eslint //Vue 的官方 ESLint 插件 针对 vue 语法进行校验 eslint-plugin-vue // standard 规则校验 eslint-config-standard eslint-plugin-import //eslint-plugin-n 用 n 不要用 node node 停止维护了 standard 依赖会报错 eslint-plugin-n eslint-plugin-promise // 一个 ESLint 解析器，它利用 TypeScript ESTree 允许 ESLint lint TypeScript 源代码 @typescript-eslint/parser // 一个 ESLint 插件，为 TypeScript 代码库提供 lint 规则 @typescript-eslint/eslint-plugin vite-plugin-eslint // vite ESLint 插件。 

添加.eslintrc.js 文件

module.exports = { root: true, parser: 'vue-eslint-parser', extends: [ 'standard', 'plugin:@typescript-eslint/recommended', 'plugin:vue/vue3-recommended' ], plugins: ['@typescript-eslint', 'vue'], env: { node: true }, parserOptions: { ecmaVersion: 2020, parser: '@typescript-eslint/parser' } } 

如果不生效检查下 vsconde eslint 插件有没有安装启用，如果安装了 看下 eslint 插件有没有报错

vue3 <script setup lang="ts"> 写法中不需要引入 defineProps 即可使用
但是 eslint 会报错 需要在配置文件中添加配置

env: { node: true, 'vue/setup-compiler-macros': true ++ }, 

之后发现新问题
发现 standard 语法规则 vscode 会报红 但是运行不会报错
发现是 vite.config.ts 中 eslintPlugin({ include: []}) 只写了 js 将 ts 补上就好了

@ 指向 src

在 vite.config.ts 中配置

 resolve: { alias: { // 当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会原封不动地被使用，因此无法被正常解析。 '@': path.resolve(__dirname, './src') } } 

没有 path 需要引入 import path from 'path'
如果 path 报引入错误 需要在 tsconfig.node.json 中 添加

"compilerOptions": { "allowSyntheticDefaultImports": true } 

如果是 ts 项目 还需要 yarn add @types/node -D
同时在 config.json 中添加

"compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } 

环境变量

vue-router

yarn add vue-router@4

css 预处理器

npm add -D stylus 官网说明
Vite 也同时提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。
没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖
引入全局则需要 yarn add stylus-loader -D

引入全局样式在 vite.config.ts 中添加

css: { preprocessorOptions: { stylus: { imports: [ path.resolve(__dirname, './src/assets/stylus/reset.styl') ] } } } 

打包 GZIP 压缩

yarn add vite-plugin-compression -D 在 vite.config.ts 中引入 配置说明

import viteCompression from 'vite-plugin-compression' export default defineConfig({ plugins: [ viteCompression({ threshold: 100 * 1000 }) ] }) 

路由+transition

transition 内必须只有一个根元素

自动引入文件夹内文件

在之前 package 打包模式下
提供了 require.context 来进行文件夹遍历导入功能
我们在自动导入 store 中用到了

在 vite 中 没有 require.context ，vite 提供了 import.meta.glob 进行导入