vite.config.ts配置

配置路径处理模块

安装ts的类型声明文件

yarn add @types/node -D

通过配置alias来定义路径的别名

resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'@coms': path.resolve(__dirname, 'src/components')
}
}

配置自动在浏览器打开

server: {
open: true
}

配置scss全局变量

安装依赖

npm install node-sass sass-loader sass -D

css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/assets/scss/_theme.scss";`
}
}
}

vite.config.ts中虽然不对报错但是process.env参数中没有.env配置文件中的参数

配置按需加载

import styleImport from 'vite-plugin-style-import'
plugins: [
vue(),
styleImport({
libs: [{
libraryName: 'vant',
esModule: true,
resolveStyle: (name) => {
return `vant/es/${name}/style/css`;
},
}]
})
]

完整配置文件如下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// import styleImport from 'vite-plugin-style-import'
import importToCDN, { autoComplete } from 'vite-plugin-cdn-import'
// 路径处理模块
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
// styleImport({
// libs: [{
// libraryName: 'vant',
// esModule: true,
// resolveStyle: (name) => {
// return `vant/es/${name}/style/css`;
// },
// }]
// }),
importToCDN({
modules: [
autoComplete('vue'),
autoComplete('axios'),
autoComplete('lodash'),
{
name:'vue',
var:'Vue',
path:'https://cdn.jsdelivr.net/npm/vue@next'
},
{
name:'vuex',
var:'Vuex',
path:'https://cdn.jsdelivr.net/npm/vuex@4.0.2/dist/vuex.global.prod.js'
},
{
name:'vue-router',
var:'VueRouter',
path:'https://cdn.jsdelivr.net/npm/vue-router@4.0.10/dist/vue-router.global.prod.js'
},
{
name:'vant',
var:'vant',
css: 'https://cdn.jsdelivr.net/npm/vant@next/lib/index.css',
path:'https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js'
}
]
})
],
resolve: {
// 定义别名
alias: {
'@': path.resolve(__dirname, 'src'),
'@components': path.resolve(__dirname, 'src/components')
}
},
css: {
preprocessorOptions: {
scss: {
charset: false,
additionalData: `@import "@/assets/scss/_theme.scss";`
},
less: {
javascriptEnabled: true
}
}
},
build: {
target: 'modules',
outDir: 'dist', // 指定输出路径
assetsDir: 'static', // 指定生成静态资源的存放路径
minify: 'terser', // 混淆器,terser构建后文件体积更小
sourcemap: false,
terserOptions: {
compress: {
drop_console: true, // 生产环境移除console
drop_debugger: true // 生产环境移除debugger
}
},
rollupOptions: {
treeshake: false,
output: {
manualChunks (id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString()
}
}
}
}
},
server: {
open: true, // 是否在浏览器打开
port: 8088, // 端口号
host: 'local.xxx.com'
},
// 引入第三方配置
optimizeDeps: {
include: []
}
})