使用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_urltimeout: request_timeout, // 请求超时时间withCredentials: false // 禁用 Cookie
})/*** 请求拦截器*/
service.interceptors.request.use((config: InternalAxiosRequestConfig) => {// 配置请求头const token = '.....'config.headers.authorization = 'Bearer ' + tokenreturn 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: stringresult_code: number | stringdefault_headers: AxiosHeadersrequest_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 } = optionreturn 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: numberpageSize: 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 = truetry {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 才会被压缩,单位 balgorithm: '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 才会被压缩,单位 balgorithm: '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, // 打包时去除debuggerdrop_console: true // 打包时去除console}},// 静态文件按类型分包rollupOptions: {output: {chunkFileNames: 'static/js/[name]-[hash].js',entryFileNames: 'static/js/[name]-[hash].js',assetFileNames: 'static/[ext]/[name]-[hash].[ext]'}}}
})

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

一文学会gtest UT测试编写(TEST\TEST_F)

一文学会gtest UT测试编写(TEST\TEST_F)

目录 一、官方文档&代码 二、不同平台导入gtest静态库 Android工程 Linux 三、UT测试 Step by Step 1. 示例入门 2. 断言 EXPECT 与 ASSERT 3. TEST与TEST_F TEST TEST_F 4. gmock Google Test&#xff08;简称 gtest&#xff09;是 Google C 测试框架&#xff0c…
阅读更多...
JVM Java虚拟机入门指南

JVM Java虚拟机入门指南

文章目录 为什么学习JVMJVM的执行流程JVM的组成部分类加载运行时数据区本地方法接口执行引擎 垃圾回收什么样的对象是垃圾呢内存溢出和内存泄漏定位垃圾的方法对象的finalization机制垃圾回收算法分代回收垃圾回收器 JVM调优参数JVM调优工具Java内存泄漏排查思路CPU飙高排查方案…
阅读更多...
【十】【C++】string类的模拟实现

【十】【C++】string类的模拟实现

浅拷贝 浅拷贝&#xff08;Shallow Copy&#xff09;是对象复制的一种方式&#xff0c;其中复制对象的过程仅仅复制对象的值&#xff0c;而不复制引用所指向的实际对象或数据。这意味着原始对象和拷贝对象会共享相同的引用或指针指向的数据。 浅拷贝的特点&#xff1a; 共享…
阅读更多...
Python tkinter (16) —— Progressbar

Python tkinter (16) —— Progressbar

本文主要介绍Python tkinter 进度条Progressbar应用及示例。 目录 系列文章 进度条Progressbar 基本概念 参数&#xff1a; mode参数 基本应用 动画设计 引入time 具体实现 start/step/stop step(amount)&#xff1a; start(interval)&#xff1a; stop()&#xff…
阅读更多...
react中hook封装一个table组件

react中hook封装一个table组件

目录 react中hook封装一个table组件依赖CommonTable / index.tsx使用组件效果 react中hook封装一个table组件 依赖 cnpm i react-resizable --save cnpm i ahooks cnpm i --save-dev types/react-resizableCommonTable / index.tsx import React, { useEffect, useMemo, use…
阅读更多...
VMware虚拟机安装openEuler系统（一）（2024）

VMware虚拟机安装openEuler系统（一）（2024）

目录 一、下载ISO镜像 二、开始创建虚拟机 通过实践是学习openEuler开源Linux系统的最佳方式。因此我们首先得搭建一个openEuler实战环境&#xff0c;文章是在Windows系统上使用VMware Workstation虚拟化软件&#xff0c;安装和学习openEuler开源Linux操作系统。 使用虚拟机…
阅读更多...
新型RedAlert勒索病毒针对VMWare ESXi服务器

新型RedAlert勒索病毒针对VMWare ESXi服务器

前言 RedAlert勒索病毒又称为N13V勒索病毒&#xff0c;是一款2022年新型的勒索病毒&#xff0c;最早于2022年7月被首次曝光&#xff0c;主要针对Windows和Linux VMWare ESXi服务器进行加密攻击&#xff0c;到目前为止该勒索病毒黑客组织在其暗网网站上公布了一名受害者&#x…
阅读更多...
人工智能专题：量子汇编语言和量子中间表示发展白皮书

人工智能专题：量子汇编语言和量子中间表示发展白皮书

今天分享的是人工智能系列深度研究报告&#xff1a;《人工智能专题&#xff1a;量子汇编语言和量子中间表示发展白皮书》。 &#xff08;报告出品方&#xff1a;量子信息网络产业联盟&#xff09; 报告共计&#xff1a;78页 量子计算与量子编程概述 随着社会生产力的发展&am…
阅读更多...
vue3 之 商城项目—home

vue3 之 商城项目—home

home—整体结构搭建 根据上面五个模块建目录图如下&#xff1a; home/index.vue <script setup> import HomeCategory from ./components/HomeCategory.vue import HomeBanner from ./components/HomeBanner.vue import HomeNew from ./components/HomeNew.vue import…
阅读更多...
手势检测跟踪解决方案

手势检测跟踪解决方案

美摄科技&#xff0c;作为业界领先的人工智能技术提供商&#xff0c;致力于为企业提供先进的手势检测与跟踪解决方案&#xff0c;以推动企业在智能化、高效化的道路上阔步前行。 一、手势检测与跟踪技术的优势 手势检测与跟踪技术作为人机交互的重要一环&#xff0c;具有以下…
阅读更多...
Flask 入门7：使用 Flask-Moment 本地化日期和时间

Flask 入门7：使用 Flask-Moment 本地化日期和时间

如果Web应用的用户来自世界各地&#xff0c;那么处理日期和时间可不是一个简单的任务。服务器需要统一时间单位&#xff0c;这和用户所在的地理位置无关&#xff0c;所以一般使用协调世界时&#xff08;UTC&#xff09;。不过用户看到 UTC 格式的时间会感到困惑&#xff0c;他们…
阅读更多...
雨云EPYC7702服务器上线了！适合幻兽帕鲁开服的VPS！雨云EPYC7702高防VPS性能测评

雨云EPYC7702服务器上线了！适合幻兽帕鲁开服的VPS！雨云EPYC7702高防VPS性能测评

雨云游戏云上线了AMD EPYC 7702的VPS服务器&#xff0c;中等水平的单核性能&#xff0c;适合开幻兽帕鲁和我的世界1.17以下版本的服务器。 AMD Epyc 7702是一款64核心128线程&#xff0c;基础频率2.00 GHz加速频率高达3.35 GHz处理器&#xff0c;凭借着7 nm工艺及新一代Rome (…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023