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 进行导入