V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
missilexuan
V2EX  ›  Vite

vite+vue3+ts 自己搭建时候一些步骤及踩坑分享

  •  
  •   missilexuan · 223 天前 · 1715 次点击
    这是一个创建于 223 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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 [email protected]

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

    4 条回复    2022-07-07 16:18:56 +08:00
    mythjava
        1
    mythjava  
       223 天前
    感谢分享
    wonderfulcxm
        2
    wonderfulcxm  
       223 天前 via iPhone
    为什么暴露到局限网才能访问 localhost ?
    rhli1995
        3
    rhli1995  
       223 天前
    感谢分享
    missilexuan
        4
    missilexuan  
    OP
       216 天前
    @wonderfulcxm 底层原理不太清楚。。。。我也是网上找的解决方案 感觉就是服务没挂上去 挺迷的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   实用小工具   ·   5085 人在线   最高记录 5556   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 05:46 · PVG 13:46 · LAX 21:46 · JFK 00:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.