Gridea

快速开始

vue项目只支持vue3

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

or 使用 yarn

$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

参考配置

const isProd = process.env.Mode === 'production'

 module.exports = {
   // 项目上下文
  base: '/h5/mobile-cli-next/',
  // 打包输出目录
  outDir: 'mobile-cli-next',
  alias: {
    '/@/': resolve(__dirname,'./src'),
    components: resolve(__dirname,"src/components")
  },
  // css预处理器
  cssPreprocessOptions: {
    scss: {
      additionalData:
        `@import "src/assets/scss/_mixin.scss"; @import "src/assets/scss/_variables.scss"; @import "src/assets/scss/common.scss";`
    }
  },
  // 清除debug
  terserOptions: isProd ? {
    compress: {
      drop_debugger: true,
      drop_console: true
    } 
  } : undefined,
  // rollup插件
  rollupInputOptions: {
    plugins: [
      zip()
    ]
  }
 }

alias别名配置问题

vite 引入模块的时候 如果不是以./或者/开头的会被视为依赖，在前面加上/@modules/xxx来进行请求
vite 别名在vite.config.ts内配置,需要以 /开头

module.exports = {
    alias: {
         '/@/': resolve(__dirname,'./src'),
    }
}

项目中使用

import baseConfig from '/@/config/config.base'

tsconfig.json 中配置

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

ts中使用axios拦截器，返回Promis类型会提示不正确

解决方法，封装axios时给返回值进行断言

((result as unknown) as Promise<Data>)

vite项目，html使用ejs模板插入代码问题，使用插件🐶

使用插件

• vite文档翻译
• 配置参考
• vite介绍
• rollup插件