使用vite创建vue+ts项目，整合常用插件（scss、vue-router、pinia、axios等）和配置

一、检查node版本

指令：node -v
为什么要检查node版本？

Vite 需要 Node.js 版本 18+，20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

二、创建vite项目

指令：npm create vite@latest vue-ts-app -- --template vue-ts
参考vite官网

模板(template)：

:::info
vanilla，vanilla-ts, vue, vue-ts，react，react-ts，react-swc，react-swc-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts，solid，solid-ts，qwik，qwik-ts
:::

三、运行项目

安装插件：npm install
运行项目：npm run dev

{
  "name": "vue-ts-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.3.11"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.5.2",
    "typescript": "^5.2.2",
    "vite": "^5.0.8",
    "vue-tsc": "^1.8.25"
  }
}

四、安装element plus

  1. 安装指令：npm install element-plus --save
  2. 自动按需导入指令：npm install -D unplugin-vue-components unplugin-auto-import
  3. 在项目配置文件中配置如下代码：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
/** element plus 自动按需导入插件 start */
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
/** element plus 自动按需导入插件 end */

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    /** element plus 自动按需导入插件配置 start */
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })] // importStyle: "sass" ---  解决覆盖element plus 的sass变量不生效的bug
    }),
    /** element plus 自动按需导入插件配置 end */
  ],
})
  1. 测试element plus按需导入是否成功：
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <!-- element plus组件 -->
    <el-button type="primary">测试element plus</el-button>
    
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

测试成功：
image.png

五、配置根目录别名

在vite.config.ts中配置：

import { fileURLToPath, URL } from 'node:url'

export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

在tsconfig.json中配置：

"baseUrl": "./", // 解析非相对模块的基础地址，默认是当前目录
  "paths": {
  "@/*": ["./src/*"] // 路径映射，相对于baseUrl
}

image.png

六、安装scss

  1. 安装指令：npm install sass -D
  2. 定义一个scss文件：global.scss

image.png

$theme-color: gray;
$main-width: 100px;
$main-height: 100px;
  1. 在配置文件中配置全局scss文件
import { fileURLToPath, URL } from 'node:url'

export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  css: {
    preprocessorOptions: {
      // scss全局文件引入
      scss: {
        // additionalData: '@import "@/styles/global.scss";' 这行代码可能会导致报错
        additionalData: '@use "@/styles/global.scss" as *;' //建议使用这行代码
      },
    },
  },
})
  1. 在App.vue文件中进行测试
<template>
  <el-button type="primary">测试element plus</el-button>
  <div class="demo-box">
    <div class="tips">111111</div>
  </div>
</template>

<style lang="scss" scoped>
/* 测试scss代码 */
.demo-box {
  background-color: $theme-color;
  width: $main-width;
  height: $main-height;
  .tips {
    color: red;
  }
}
</style>

七、配置eslint（代码检查）

  1. 安装pnpm：npm i -g pnpm
  2. 安装eslint：npm i eslint -D
  3. 初始化eslint：pnpm eslint --init

image.png

  1. 在项目的根目录下找到eslint配置文件：.eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/vue3-essential"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "parser": "@typescript-eslint/parser",
    "sourceType": "module"
  },
  "plugins": [
    "@typescript-eslint",
    "vue"
  ],
  "rules": {
    //
  }
}

解析：

  • env：表示eslint 运行的环境
  • extends：表示继承的规则
  • parserOptions：指定解析器选项
  • plugins：用到的插件
  • rules：检验规则，参考eslint官网规则
  1. 配置规则
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:vue/vue3-essential"],
  "parserOptions": {
    "ecmaVersion": "latest",
    "parser": "@typescript-eslint/parser",
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint", "vue"],
  "rules": {
    "vue/script-setup-uses-vars": "error",
    "vue/no-reserved-component-names": "off",
    "@typescript-eslint/ban-ts-ignore": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/no-var-requires": "off",
    "@typescript-eslint/no-empty-function": "off",
    "vue/custom-event-name-casing": "off",
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": "off",
    "@typescript-eslint/ban-ts-comment": "off",
    "@typescript-eslint/ban-types": "off",
    "@typescript-eslint/no-non-null-assertion": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-unused-vars": "error",
    "no-unused-vars": "error",
    "space-before-function-paren": "off",

    "vue/attributes-order": "off",
    "vue/one-component-per-file": "off",
    "vue/html-closing-bracket-newline": "off",
    "vue/max-attributes-per-line": "off",
    "vue/multiline-html-element-content-newline": "off",
    "vue/singleline-html-element-content-newline": "off",
    "vue/attribute-hyphenation": "off",
    "vue/require-default-prop": "off",
    "vue/require-explicit-emits": "off",
    "vue/html-self-closing": [
      "error",
      {
        "html": {
          "void": "always",
          "normal": "never",
          "component": "always"
        },
        "svg": "always",
        "math": "always"
      }
    ],
    "vue/multi-word-component-names": "off"
  }
}
  1. 在项目根目录新建.eslintignore文件，用于配置哪些文件不用检测
dist
node_modules
  1. 在package.json中添加脚本
"scripts": {
		"lint": "eslint src",
		"fix": "eslint src --fix"
},
  1. 检测eslint是否生效：由下图可得eslint有效

image.png

八、配置prettier，代码格式化、美化工具

  1. 安装prettier相关的插件：npm install -D eslint-plugin-prettier prettier eslint-config-prettier
  2. 在项目根目录下新建prettier的配置文件：.prettierrc.json
  3. 新建忽略文件：.prettierignore
/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*
  1. 编辑配置：参考prettier官网
{
  "printWidth": 100, //每行最多显示的字符数
  "tabWidth": 2, //tab的宽度 2个字符
  "useTabs": false,//使用tab代替空格
  "semi": false,//结尾使用分号
  "vueIndentScriptAndStyle": false,
  "singleQuote": true, 
  "quoteProps": "as-needed",
  "bracketSpacing": true, 
  "trailingComma": "none",
  "jsxSingleQuote": false,
  "arrowParens": "always",
  "insertPragma": false,
  "requirePragma": false,
  "proseWrap": "never",
  "htmlWhitespaceSensitivity": "strict",
  "endOfLine": "auto",
  "rangeStart": 0
}
  1. 更新.eslintrc.json中的配置

在extends中新增代码："plugin:prettier/recommended"

"extends": [
  "eslint:recommended",
  "plugin:@typescript-eslint/recommended",
  "plugin:vue/vue3-essential",
  // 新增的配置
  "plugin:prettier/recommended"
],
  1. 添加脚本"format": "prettier --write \"./**/*.{html,vue,js,ts,json,md}\" "
"scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint src",
    "fix": "eslint src --fix",
  	"format": "prettier --write \"./**/*.{html,vue,js,ts,json,md}\" "
},
  1. vscode中设置保存自动格式化

image.png

九、配置组件自动按需导入

  1. 安装插件：npm i unplugin-vue-components -D
  2. vite.config.ts中配置自动导入规则
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      // 要搜索组件的目录的相对路径
      dirs: ['src/components', 'src/layout'],
      // 组件的有效文件扩展名
      extensions: ['vue', 'md'],
      // 搜索子目录
      deep: true,
      // 在哪些文件下自动导入组件
      include: [/\.vue$/, /\.vue\?vue/],
      // 生成自定义 `auto-components.d.ts` 全局声明
      dts: 'src/types/auto-components.d.ts',
      // 自定义组件的解析器
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })], // importStyle: "sass" ---  解决覆盖element plus 的sass变量不生效的bug
      // 在哪些目录下不自动导入组件
      exclude: [/[\\/]node_modules[\\/]/]
    })
  ],
})
  1. 保存配置文件，重新运行项目后，会发现项目自动生成了如下文件：

image.png

  1. 检查效果
  • 在components中新建BaseLink/index.vue组件
<template>
  <div class="base-link"><slot></slot></div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
.base-link {
  font-size: 14px;
  font-weight: 500;
  color: green;
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
}
</style>
  • 保存组件后，会发现在auto-components.d.ts文件中多出了对应的代码
export {}

declare module 'vue' {
  export interface GlobalComponents {
    BaseLink: typeof import('./../components/BaseLink/index.vue')['default']
    ElButton: typeof import('element-plus/es')['ElButton']
    HelloWorld: typeof import('./../components/HelloWorld.vue')['default']
  }
}
  • 在App中使用BaseLink组件
<script setup lang="ts"></script>

<template>
  <el-button type="primary">测试element plus</el-button>
  <div class="demo-box">
    <div class="tips">111111</div>
  </div>
  <base-link>测试组件自动按需导入</base-link>
</template>

<style lang="scss" scoped>
.demo-box {
  background-color: $theme-color;
  width: $main-width;
  height: $main-height;
  .tips {
    color: red;
  }
}
</style>

发现可以正确使用：
image.png

十、插件自动引入

  1. 安装插件：npm i unplugin-auto-import -D
  2. 在配置文件中配置自动导入规则
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      // 在哪些文件下自动导入
      include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/,
        /\.vue\?vue/, // .vue
        /\.md$/ // .md
      ],
      // 自动导入的内容
      imports: [
        'vue'
      ],
      // 配置文件生成位置，默认是根目录
      dts: 'src/types/auto-imports.d.ts',
      // eslint检查
      eslintrc: {
        enabled: true, // Default `false`
        filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
        globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
      },
      resolvers: [ElementPlusResolver()]
    }),
  ],
})
  1. 保存配置文件，重新运行项目，会自动生成如下文件：

image.png

  1. 在.eslintrc.json中修改配置，保证eslint检查不会报错

在extends中新增配置：

"extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/vue3-essential",
    "plugin:prettier/recommended",
    ".eslintrc-auto-import.json"
],
  1. 在App.vue中检验效果
<script setup lang="ts">
// 这里并未导入ref，eslint也未提示报错
const number = ref(1)

const handleNumberChange = () => {
  number.value = number.value++
}
</script>

<template>
  <el-button type="primary">测试element plus</el-button>
  <div class="demo-box">
    <div class="tips">111111</div>
  </div>
  <base-link>测试组件自动按需导入</base-link>
  <div>这是number值：{{ number }}</div>
  <el-button @click="handleNumberChange">改变number值</el-button>
</template>

<style lang="scss" scoped>
.demo-box {
  background-color: $theme-color;
  width: $main-width;
  height: $main-height;
  .tips {
    color: red;
  }
}
</style>

十一、安装vue-router

  1. 安装插件：pnpm add vue-router@4
  2. 在src目录下新建router文件夹，结构如下：

image.png

  1. index.ts是路由的根文件，modules下的文件是各个路由模块
import type { App } from 'vue'
import type { RouteRecordRaw } from 'vue-router'
import { createRouter, createWebHistory } from 'vue-router'
import remainingRouter from './modules/remaining'

// 创建路由实例
const router = createRouter({
  history: createWebHistory(import.meta.env.VITE_BASE_PATH), // createWebHashHistory URL带#，createWebHistory URL不带#
  strict: true,
  routes: remainingRouter as RouteRecordRaw[],
  scrollBehavior: () => ({ left: 0, top: 0 })
})

export const setupRouter = (app: App<Element>) => {
  app.use(router)
}

export default router

const remainingRouter = [
  {
    path: '/test',
    name: 'TestPage',
    component: () => import('@/views/test/index.vue'),
    mate: {
      title: '测试页面'
    }
  }
]

export default remainingRouter
  1. 新建test页面组件
<template>
  <div>
    <h1>这是test页面</h1>
    <base-link @click="handleToHome">跳转至首页</base-link>
  </div>
</template>
<script setup lang="ts" name="">
const router = useRouter()
const handleToHome = () => {
  router.push('/')
}
</script>
<style lang="scss" scoped></style>
  1. 在入口文件main.ts中引入
import { createApp } from 'vue'
import './style.css'
import './styles/reset.scss'
import App from './App.vue'
import router, { setupRouter } from '@/router'

// 创建实例
const setupAll = async () => {
  const app = createApp(App)

  setupRouter(app)

  await router.isReady()

  app.mount('#app')
}

setupAll()
  1. App.vue中测试效果
<script setup lang="ts">
// 这里并未导入ref，eslint也未提示报错
const number = ref(1)

const handleNumberChange = () => {
  number.value++
}

const router = useRouter()
const handleToTest = () => {
  router.push('/test')
}
</script>

<template>
  <el-button type="primary">测试element plus</el-button>
  <div class="demo-box">
    <div class="tips">111111</div>
  </div>
  <base-link>测试组件自动按需导入</base-link>
  <div>这是number值：{{ number }}</div>
  <el-button @click="handleNumberChange">改变number值</el-button>
  <base-link @click="handleToTest">跳转至test页面</base-link>
  <router-view />
</template>

<style lang="scss" scoped>
.demo-box {
  background-color: $theme-color;
  width: $main-width;
  height: $main-height;
  .tips {
    color: red;
  }
}
</style>

image.pngimage.png

十二、安装vite-plugin-vue-setup-extend插件，解决在setup中定义name问题

  1. 安装：pnpm i vite-plugin-vue-setup-extend -D
  2. 在vite.config.ts中配置：
import vueSetupExtend from 'vite-plugin-vue-setup-extend'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueSetupExtend(),
  ]
})
  1. 在vue组件中定义name
  2. 注意：必须要注意的是当组件的script标签中的内容为空时，name还是不会生效

十三、安装pinia状态管理

  1. 安装：pnpm install pinia
  2. 在src目录下新建stores文件夹，结构如下：

image.png

  1. index.ts为根文件，counter.ts中存储的是各个模块数据
import type { App } from 'vue'
import { createPinia } from 'pinia'

const store = createPinia()

export const setupStore = (app: App<Element>) => {
  app.use(store)
}

export { store }

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  /**
   * ref() 就是 state 属性
   * computed() 就是 getters
   * function() 就是 actions，action中可以使用异步函数
   */
  //state:
  const count = ref(0)
  //getter:
  const getCount = computed<number>(() => {
    return count.value
  })
  //actions:
  const increment = () => {
    count.value++
  }
  //暴露state、computed、actions；否则无法使用
  return { count, getCount, increment }
})
  1. 在入口文件main.ts中引入
import { createApp } from 'vue'
import { setupStore } from '@/stores'

// 创建实例
const setupAll = async () => {
  const app = createApp(App)
  setupStore(app)
  app.mount('#app')
}

setupAll()
  1. 使用方法
<template>
  <div>
    <h1>这是test页面</h1>
    <div>这是count：{{ counterStore.count }}</div>
  </div>
</template>
<script setup lang="ts" name="TestPage">
import { useCounterStore } from '@/stores/modules/counter'
const counterStore = useCounterStore()
</script>
<style lang="scss" scoped></style>

十四、安装Axios请求插件

  1. 安装axios插件pnpm install axios -D
  2. 配置axios

一、在src根目录下创建如下目录：
api存储接口
axios存储配置文件
image.png
config.ts:

import axios, {
  AxiosError,
  type InternalAxiosRequestConfig,
  type AxiosInstance,
  type AxiosResponse
} from 'axios'

const base_url = import.meta.env.BASE_URL
const request_timeout = import.meta.env.VITE_REQUEST_TIMEOUT

// 创建axios实例
const service: AxiosInstance = axios.create({
  baseURL: base_url, // api 的 base_url
  timeout: request_timeout, // 请求超时时间
  withCredentials: false // 禁用 Cookie
})

/**
 * 请求拦截器
 */
service.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    // 配置请求头
    const token = '.....'
    config.headers.authorization = 'Bearer ' + token
    return config
  },
  (error: AxiosError) => {
    console.error('网络错误，请稍后重试')
    return Promise.reject(error)
  }
)

/**
 * 响应拦截器
 */
service.interceptors.response.use(
  (response: AxiosResponse<any>) => {
    // 响应处理，如状态码
    return response
  },
  (error: AxiosError) => {
    return Promise.reject(error)
  }
)

export { service }

index.ts:

import { service } from '@/axios/config'

type AxiosHeaders = 'application/json' | 'application/x-www-form-urlencoded' | 'multipart/form-data'

interface IAxiosConfig {
  base_url: string
  result_code: number | string
  default_headers: AxiosHeaders
  request_timeout: number
}

const default_headers: IAxiosConfig = {
  /**
   * api请求基础路径
   */
  base_url: import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL,
  /**
   * 接口成功返回状态码
   */
  result_code: 200,

  /**
   * 接口请求超时时间
   */
  request_timeout: import.meta.env.VITE_REQUEST_TIMEOUT,

  /**
   * 默认接口请求类型
   * 可选值：application/x-www-form-urlencoded multipart/form-data
   */
  default_headers: 'application/json'
}

const request = (option: any) => {
  const { url, method, params, data, headersType, responseType } = option
  return service({
    url: url,
    method,
    params,
    data,
    responseType: responseType,
    headers: {
      'Content-Type': headersType || default_headers
    }
  })
}

export default {
  get: async <T = any>(option: any) => {
    const res = await request({ method: 'GET', ...option })
    return res.data as unknown as T
  },
  post: async <T = any>(option: any) => {
    const res = await request({ method: 'POST', ...option })
    return res.data as unknown as T
  },
  postOriginal: async (option: any) => {
    const res = await request({ method: 'POST', ...option })
    return res
  },
  delete: async <T = any>(option: any) => {
    const res = await request({ method: 'DELETE', ...option })
    return res.data as unknown as T
  },
  put: async <T = any>(option: any) => {
    const res = await request({ method: 'PUT', ...option })
    return res.data as unknown as T
  },
  download: async <T = any>(option: any) => {
    const res = await request({ method: 'GET', responseType: 'blob', ...option })
    return res as unknown as Promise<T>
  },
  upload: async <T = any>(option: any) => {
    option.headersType = 'multipart/form-data'
    const res = await request({ method: 'POST', ...option })
    return res as unknown as Promise<T>
  }
}

test.ts:

import request from '@/axios'

export interface ITestDataParamsType {
  pageNo: number
  pageSize: number
}

/**
 * 获取测试数据
 * @param params 分页参数
 * @returns
 */
export const getTestData = async (params: ITestDataParamsType) => {
  return await request.get({
    url: '/test/page',
    params
  })
}
  1. 调用接口
// template
<el-button @click="handleRequest">发起请求</el-button>

// script
import { getTestData, type ITestDataParamsType } from '@/api/test'
const loading = ref(false)

const handleRequest = async () => {
  loading.value = true
  try {
    const params: ITestDataParamsType = {
      pageNo: 1,
      pageSize: 10
    }
    await getTestData(params)
  } finally {
    loading.value = false
  }
}

十五、安装vite-plugin-svg-icon插件，用于使用svg

  1. 安装：pnpm i vite-plugin-svg-icons -D
  2. 在main.ts中引入：import 'virtual:svg-icons-register'
  3. 在vite.config.ts中配置：
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

export default defineConfig({
  plugins: [
    // ...
    createSvgIconsPlugin({
      // 图标存放的地址
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[dir]-[name]',
      svgoOptions: {
        // 解决svg图标不显示的问题
        plugins: [
          {
            name: 'removeAttrs',
            active: true,
            params: { elemSeparator: ',', attrs: [] }
          }
        ]
      }
    })
  ]
})
  1. 封装svg-icon组件，用于使用svg图标
<template>
  <svg class="svg-icon" aria-hidden :style="`width: ${props.size}; height: ${props.size};`">
    <use :xlink:href="symbolId" :fill="props.color" />
  </svg>
</template>
<script setup lang="ts" name="SvgIcon">
const props = defineProps({
  prefix: {
    type: String,
    default: 'icon'
  },
  name: {
    type: String,
    required: true
  },
  color: {
    type: String,
    default: ''
  },
  size: {
    type: String,
    default: '1em'
  }
})
const symbolId = computed(() => `#${props.prefix}-${props.name}`)
</script>
<style lang="scss" scoped>
.svg-icon {
  display: inline-block;
  outline: none;
  width: 1em;
  height: 1em;
  /* 因 icon 大小被设置为和字体大小一致，而 span 等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
  vertical-align: -0.15em;
  /* 定义元素的颜色，currentColor 是一个变量，其值就是当前元素的 color 值，如果当前元素未设置 color 值，则从父元素继承 */
  fill: currentColor;
  overflow: hidden;
}
</style>
  1. 存放svg文件

image.png

  1. 使用：<svg-icon name="vue" size="24px" />

十六、安装vite-plugin-compression插件，项目打包时压缩文件

  1. 安装：pnpm i vite-plugin-compression -D
  2. 在vite.config.ts中进行配置：
export default defineConfig({
  plugins: [
    // ...
    viteCompression({
      verbose: true, // 是否在控制台输出压缩结果
      disable: false, // 是否禁用
      threshold: 10240, // 体积大于 threshold 才会被压缩,单位 b
      algorithm: 'gzip', // 压缩算法,可选 [ 'gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw']
      ext: '.gz', // 生成的压缩包后缀
      deleteOriginFile: false //压缩后是否删除源文件
    })
  ],
})
  1. 打包，在控制台中查看压缩结果：

image.png

十七、VITE环境基本配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
/** element plus 自动按需导入插件 start */
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
/** element plus 自动按需导入插件 end */
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
import { fileURLToPath, URL } from 'node:url'
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

import viteCompression from 'vite-plugin-compression'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueSetupExtend(),
    /** element plus 自动按需导入插件配置 start */
    AutoImport({
      // 在哪些文件下自动导入
      include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/,
        /\.vue\?vue/, // .vue
        /\.md$/ // .md
      ],
      // 自动导入的内容
      imports: ['vue', 'vue-router'],
      // 配置文件生成位置，默认是根目录
      dts: 'src/types/auto-imports.d.ts',
      // eslint检查
      eslintrc: {
        enabled: true, // Default `false`
        filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
        globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
      },
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      // 要搜索组件的目录的相对路径
      dirs: ['src/components', 'src/layout'],
      // 组件的有效文件扩展名
      extensions: ['vue', 'md'],
      // 搜索子目录
      deep: true,
      // 在哪些文件下自动导入组件
      include: [/\.vue$/, /\.vue\?vue/],
      // 生成自定义 `auto-components.d.ts` 全局声明
      dts: 'src/types/auto-components.d.ts',
      // 自定义组件的解析器
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })], // importStyle: "sass" ---  解决覆盖element plus 的sass变量不生效的bug
      // 在哪些目录下不自动导入组件
      exclude: [/[\\/]node_modules[\\/]/]
    }),
    /** element plus 自动按需导入插件配置 end */
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[dir]-[name]',
      svgoOptions: {
        // 解决svg图标不显示的问题
        plugins: [
          {
            name: 'removeAttrs',
            active: true,
            params: { elemSeparator: ',', attrs: [] }
          }
        ]
      }
    }),
    viteCompression({
      verbose: true, // 是否在控制台输出压缩结果
      disable: false, // 是否禁用
      threshold: 10240, // 体积大于 threshold 才会被压缩,单位 b
      algorithm: 'gzip', // 压缩算法,可选 [ 'gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw']
      ext: '.gz', // 生成的压缩包后缀
      deleteOriginFile: false //压缩后是否删除源文件
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      // scss全局文件引入
      scss: {
        additionalData: '@use "@/styles/global.scss" as *;'
      }
    }
  },
  // 打包配置
  build: {
    minify: 'terser', // 指定使用哪种混淆器
    outDir: 'dist', // 指定输出路径
    sourcemap: false, // 构建后是否生成 source map 文件
    terserOptions: {
      // 传递给 Terser 的更多 minify 选项
      compress: {
        drop_debugger: true, // 打包时去除debugger
        drop_console: true // 打包时去除console
      }
    },
    // 静态文件按类型分包
    rollupOptions: {
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
      }
    }
  }
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/376642.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

支付确认订单页面实现

支付确认订单页面实现

类似购物车页面&#xff0c;但是这里商品显示的是购物车选中的商品&#xff0c;所以cart要加下checked过滤&#xff1b; <!-- 收货地址 开始 --> <view class"revice_address_row"><view class"user_info"><view class"user_in…
阅读更多...
Linux安全技术与iptables防火墙

Linux安全技术与iptables防火墙

一.安全技术&#xff1a; 入侵检测系统&#xff08;Intrusion Detection Systems&#xff09;&#xff1a;特点是不阻断任何网络访问&#xff0c;量化、定位来自内外网络的威胁情况&#xff0c;主要以提供报警和事后监督为主&#xff0c;提供有针对性的指导措施和安全决策依据,…
阅读更多...
Topaz Photo AI for Mac v2.3.1 补丁版人工智能降噪软件无损放大

Topaz Photo AI for Mac v2.3.1 补丁版人工智能降噪软件无损放大

想要将模糊的图片变得更加清晰&#xff1f;不妨试试Topaz Photo AI for Mac 这款人工智能、无损放大软件。Topaz Photo AI for Mac 一款强大的人工智能降噪软件&#xff0c;允许用户使用复杂的锐化算法来提高图像清晰度&#xff0c;还包括肖像编辑选项&#xff0c;如面部重塑、…
阅读更多...
企业计算机服务器中了mallox勒索病毒怎么办，mallox勒索病毒处理流程

企业计算机服务器中了mallox勒索病毒怎么办，mallox勒索病毒处理流程

由于网络技术的不断发展与应用&#xff0c;越来越多的企业开始依赖计算机技术来提高企业效率。然而&#xff0c;网络安全威胁无处不在&#xff0c;严重影响着企业计算机服务器中的数据安全。近期&#xff0c;云天数据恢复中心接到许多中大型企业的求助&#xff0c;企业的多台服…
阅读更多...
2024-02-07（Sqoop，Flume）

2024-02-07（Sqoop，Flume）

1.Sqoop的增量导入 实际工作中&#xff0c;数据的导入很多时候只需要导入增量的数据&#xff0c;并不需要将表中的数据每次都全部导入到hive或者hdfs中&#xff0c;因为这样会造成数据重复问题。 增量导入就是仅导入新添加到表中的行的技术。 sqoop支持两种模式的增量导入&a…
阅读更多...
Vulnhub靶机：hacksudoLPE

Vulnhub靶机：hacksudoLPE

一、介绍 运行环境&#xff1a;Virtualbox 攻击机&#xff1a;kali&#xff08;10.0.2.15&#xff09; 靶机&#xff1a;hacksudoLPE&#xff08;10.0.2.47&#xff09; 目标&#xff1a;获取靶机root权限和flag&#xff0c;该靶机是一个练习提权的靶场&#xff0c;主要以提…
阅读更多...
Java 语法糖

Java 语法糖

Java 语法糖 switch 支持 String 与枚举自动装箱与拆箱泛型可变参数 ...枚举内部类断言for-each 语法糖指在计算机语言中添加的某种语法&#xff0c;这种语法对语言的功能并没有影响&#xff0c;但是更方便程序员使用 带有语法糖的代码一般不能直接翻译为汇编语言&#xff0c;J…
阅读更多...
数据结构·复杂度讲解

数据结构·复杂度讲解

1. 什么是数据结构 数据结构(Data Structure)是计算机存储、组织数据的方式&#xff0c;指相互之间存在一种或多种特定关系的数据元素的集合。 数据结构是用来在内存中管理数据的&#xff0c;类似的&#xff0c;我们熟悉的文件或数据库是在硬盘中管理数据的。内存中的数据是带点…
阅读更多...
鸿蒙开发系列教程（十五）--gesture 手势事件

鸿蒙开发系列教程（十五）--gesture 手势事件

gesture 手势事件 手势操作是指在移动设备上使用手指或手势进行与应用程序交互的方式。手势操作可以包括点击、滑动、双击、捏合等动作&#xff0c;用于实现不同的功能和操作。 gesture 常规手势 参考代码&#xff1a; Entry Component struct Test03 {build() {Column() {…
阅读更多...
C++ map和set

C++ map和set

1. 关联式容器 序列式容器&#xff1a;因为其底层为线性序列的数据结构&#xff0c;里面存储的是元素本身&#xff0c;比如&#xff1a;vector、list、deque 关联式容器也是用来存储数据的&#xff0c;与序列式容器不同的是&#xff0c;其里面存储的是结构的键值对&#xff0…
阅读更多...
【golang】24、go get 和 go mod：indrect 与 go mod tidy

【golang】24、go get 和 go mod：indrect 与 go mod tidy

文章目录 go get 会执行如下操作&#xff1a; 操作 go.mod 文件&#xff08;add、update、remove&#xff09;下载依赖到 $GOPATH/pkg/mod 中若已安装&#xff0c;则更新该包&#xff0c;到最新版本 试验前置准备&#xff1a;首先删除已下载的依赖&#xff0c;rm -rf $GOPATH…
阅读更多...
STM32——LCD（1）认识

STM32——LCD（1）认识

目录 一、初识LCD 1. LCD介绍 2. 像素 3. LED和OLED显示器 4. 显示器的基本参数 &#xff08;1&#xff09;像素 &#xff08;2&#xff09;分辨率 &#xff08;3&#xff09;色彩深度 &#xff08;4&#xff09;显示器尺寸 &#xff08;5&#xff09;点距 二、液晶…
阅读更多...
[word] word大小写快捷键是什么？ #知识分享#学习方法#笔记

[word] word大小写快捷键是什么？ #知识分享#学习方法#笔记

word大小写快捷键是什么&#xff1f; word转换大小写的快捷方式是按“ShiftF3”。设置方法如下&#xff1a; 1、在电脑桌面找到需要转换大小写的文档&#xff0c;右键单击打开它。 2、打开文档之后&#xff0c;在文档里面选中需要转换的段落。 3、选中了之后在键盘里面找到“…
阅读更多...
【已解决】onnx转换为rknn置信度大于1，图像出现乱框问题解决

【已解决】onnx转换为rknn置信度大于1，图像出现乱框问题解决

前言 环境介绍&#xff1a; 1.编译环境 Ubuntu 18.04.5 LTS 2.RKNN版本 py3.8-rknn2-1.4.0 3.单板 迅为itop-3568开发板 一、现象 采用yolov5训练并将pt转换为onnx&#xff0c;再将onnx采用py3.8-rknn2-1.4.0推理转换为rknn出现置信度大于1&#xff0c;并且图像乱框问题…
阅读更多...
Python操作Word表格对齐、单元格对齐

Python操作Word表格对齐、单元格对齐

通过Table的alignment可以设置表格居左对齐、居中对齐、居右对齐。通过Cell的vertical_alignment可以设置垂直位置。通过单元格里段落的alignment可以设置文本的左右对齐方式。 import docx from docx.enum.table import WD_TABLE_ALIGNMENT, WD_CELL_VERTICAL_ALIGNMENT from…
阅读更多...
李宏毅LLM——大模型+大资料的神奇力量

李宏毅LLM——大模型+大资料的神奇力量

文章目录 大模型的重要性顿悟时刻 大资料的重要性数据预处理不一样的做法&#xff1a;KNN LM 对应视频P12-P14 大模型的重要性 模型参数和数据集越大&#xff0c;文字接龙的错误率越低 顿悟时刻 当模型超过10B-20B时&#xff0c;会突然顿悟 启示&#xff1a;不能只看最终结…
阅读更多...
软件定义网络 SDN 简介、OpenFlow

软件定义网络 SDN 简介、OpenFlow

目录 软件定义网络 SDN 简介 1 SDN 与 协议 OpenFlow 1.1 SDN 1.2 OpenFlow 1.2.1 协议 OpenFlow 1.2.2 OpenFlow 数据层面 &#xff08;1&#xff09;匹配 动作 &#xff08;2&#xff09;流表 1.流表由远程控制器管理 2.流表结构 2 SDN 体系结构 3 SDN 控制器 软…
阅读更多...
机器学习--K近邻算法，以及python中通过Scikit-learn库实现K近邻算法API使用技巧

机器学习--K近邻算法，以及python中通过Scikit-learn库实现K近邻算法API使用技巧

文章目录 1.K-近邻算法思想2.K-近邻算法(KNN)概念3.电影类型分析4.KNN算法流程总结5.k近邻算法api初步使用机器学习库scikit-learn1 Scikit-learn工具介绍2.安装3.Scikit-learn包含的内容4.K-近邻算法API5.案例5.1 步骤分析5.2 代码过程 1.K-近邻算法思想 假如你有一天来到北京…
阅读更多...
【 buuctf-后门查杀】

【 buuctf-后门查杀】

采用 D 盾进行扫描查杀 有一个级别为 5 的扫描结果&#xff0c;记事本打开&#xff0c;即为 flag
阅读更多...
【保姆级教程|YOLOv8改进】【6】快速涨点，SPD-Conv助力低分辨率与小目标检测

【保姆级教程|YOLOv8改进】【6】快速涨点，SPD-Conv助力低分辨率与小目标检测

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…
阅读更多...
最新文章

Copyright @ 2022~2023