vue3-Vite-TS开箱即用的模板

每次创建一个新的项目都需要配置很多东西，将每次都需要配置的东西总结一下作为一个模板，下次就可以直接使用 源码地址：github.com/Mr-DG/vue3-…

下面的配置为了解释删去不必要的代码，不是完整的，需要完整的前往仓库自取

配置别名

// vite.config.ts
// 获取别名路径
const getPath = (path: string) => fileURLToPath(new URL(path, import.meta.url))
alias: {
  '@': getPath('./src'),
  'components': getPath('./src/components'),
  'assets': getPath('./src/assets'),
  'stores': getPath('./src/stores'),
  'views': getPath('./src/views')
}

// tsconfig.json
// 这里配置完之后，就有路径提示了
"compilerOptions": {
  "baseUrl": ".",
  "paths": {
    "@/*": ["./src/*"],
    "components/*": ["./src/components/*"],
    "assets/*": ["./src/assets/*"],
    "stores/*": ["./src/stores/*"],
    "views/*": ["./src/views/*"]
  }
},

vite服务配置

// ------服务配置------
server: {
  host: true, // host设置为true才可以使用network的形式，以ip访问项目
  port: 8080, // 端口号
  open: true, // 自动打开浏览器
  cors: true, // 跨域设置允许
  strictPort: true, // 如果端口已占用直接退出
  // 接口代理
  proxy: {
    '/api': {
      target: '<http://localhost:3001/>',  // 本地 8080 前端代码的接口 代理到 3001 的服务端口
      changeOrigin: true, // 允许跨域
      rewrite: (path) => path.replace('/api/', '/'),
    },
  },
}

vite打包配置

// ------打包配置------
build: {
  chunkSizeWarningLimit: 2000, // 消除打包大小超过500kb警告
  // 在生产环境移除console.log
  terserOptions: {
    compress: {
      drop_console: true,
      pure_funcs: ['console.log', 'console.info'],
      drop_debugger: true,
    },
  },
  // 静态资源打包到dist下的不同目录
  assetsDir: 'static/assets',
  rollupOptions: {
    output: {
      chunkFileNames: 'static/js/[name]-[hash].js',
      entryFileNames: 'static/js/[name]-[hash].js',
      assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
    },
  },
}

环境变量配置

// 在根目录下创建三个文件 .env .env.development .env.production
// 文件中的变量名必须以VITE_开头，也可以配置一下改成别的
// vite.config.ts
export default defineConfig({
  plugins: [vue()],
  envPrefix:"APP_",//APP_  为自定义开头名
})

// .env
VITE_BASE_URL = /api

// 获取
console.log(import.meta.env.VITE_BASE_URL)
// 自带几个变量解释
BASE_URL: "/",         // 用来请求静态资源初始的 url
DEV: true,             // 用来判断是否是开发环境
MODE: "development",   // 用来指明现在所处于的模式，一般通过它进行不同环境的区分
PROD: false,           // 用来判断当前环境是否是正式环境
SSR: false,            // 用来判断是否是服务端渲染的环境

// Vite 默认是不加载 .env 文件的，因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个
// 在vite.config.ts中获取环境变量
import { defineConfig, loadEnv } from 'vite'
// 参数：loadEnv(mode, envDir, prefixes = 'VITE_')
const config = loadEnv('development', './')
// 获取当前模式
export default defineConfig(({ mode }) => {
// 获取环境变量
    const env = loadEnv(mode, process.cwd())
    return {
      plugins: [vue()],
      server: {
        proxy: {
          'api': {
            target: env.VITE_PROXY_URL || '<http://localhost:3001/>'
           }
        }
      }
    }
})

// 给环境变量提供智能提示, 在根目录下创建一个env.d.ts文件
/// <reference types="vite/client" />
interface ImportMetaEnv {
  readonly VITE_PROXY_URL: string
  // 更多环境变量...
}

自动按需引入

// unplugin-auto-import：自动按需引入 vue\vue-router\pinia 等的api
npm i -D unplugin-auto-import
// 动按需引入 第三方的组件库组件 和 我们自定义的组件
npm i unplugin-vue-components -D
npm i --save ant-design-vue

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
plugins: [
    AutoImport({
        imports: ['vue', 'vue-router'], // 自动导入vue和vue-router相关函数
	dts: 'src/auto-import.d.ts', // 生成 `auto-import.d.ts` 全局声明
    }),
    Components({
        dts: './src/components.d.ts', // 生成 `components.d.ts` 全局声明
        dirs: ['src/components'], // 用于搜索组件的目录相对路径
	resolvers: [AntDesignVueResolver()], // Ant Design Vue 按需引入
  })
],

打包压缩

// vite-plugin-compression
npm i vite-plugin-compression -D
// vite.config.ts
import viteCompression from 'vite-plugin-compression'

plugins: [
  viteCompression({
      verbose: true,     // 是否在控制台输出压缩结果
      disable: false,    // 是否禁用
      threshold: 10240,  // 体积大于多少才压缩，单位b
      algorithm: 'gzip', // 压缩算法(['gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw'])
      ext: '.gz',        // 压缩包后缀
  })
]

svg icon配置

// vite-svg-loader
npm i vite-svg-loader -D
// vite.config.ts
plugins: [svgLoader()]
// 如果使用ts的话，新建一个vite-icon.d.ts
// vite-icon.d.ts
declare module 'vite-svg-loader' {
  import { Plugin } from 'vite'
  function svgLoader(options?: { svgoConfig?: Object, svgo?: boolean }): Plugin
  export default svgLoader
}

declare module '*.svg?component' {
  import { FunctionalComponent, SVGAttributes } from 'vue'
  const src: FunctionalComponent<SVGAttributes>
  export default src
}

declare module '*.svg?url' {
  const src: String
  export default src
}

declare module '*.svg?raw' {
  const src: String
  export default src
}

// 使用
<TestIcon />
import TestIcon from 'assets/icon/test.svg?component'

less配置

npm install less -D 
// vite.config.ts 
// 与plugins同级 
css: { 
  preprocessorOptions: { 
    less: { 
      javascriptEnabled: true 
    } 
  } 
}