// vite 打debugger定位不到具体行,请问怎么解决
// vite.config.js
import { defineConfig, loadEnv } from 'vite'
import path from 'path'
import createVitePlugins from './vite/plugins'
// 自动引入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {
ElementPlusResolver
} from 'unplugin-vue-components/resolvers'
// 手动导入
import ElementPlus from 'unplugin-element-plus/vite'
export default defineConfig(({ mode, command }) => {
const env = loadEnv(mode, process.cwd())
const { VITE_APP_ENV } = env
return {
devtool: 'source-map',
base: VITE_APP_ENV === 'production' ? '/' : '/',
//fix:error:stdin>:7356:1: warning: "@charset" must be the first rule in the file
css: {
preprocessorOptions: {
scss: {
// 自定义的主题色
additionalData: `@use "@/assets/styles/theme.scss" as *;`,
},
},
postcss: {
plugins: [
{
postcssPlugin: 'internal:charset-removal',
AtRule: {
charset: (atRule) => {
if (atRule.name === 'charset') {
atRule.remove();
}
}
}
}
]
}
},
plugins: [
createVitePlugins(env, command === 'build'),
// 额外配置了手动引入修改主题色,在代码中不引入ElMessage直接使用的话tslint会报错,引入的话主题色又会被覆盖,只能再配置手动引入的
ElementPlus({
useSource: true,
}),
// 自动引入
AutoImport({
resolvers: [ElementPlusResolver({
// 自动引入修改主题色添加这一行,使用预处理样式,不添加将会导致使用ElMessage,ElNotification等组件时默认的主题色会覆盖自定义的主题色
importStyle: "sass",
})],
}),
Components({
resolvers: [ElementPlusResolver({
// 自动引入修改主题色添加这一行,使用预处理样式
importStyle: "sass",
})],
}),
],
resolve: {
// https://cn.vitejs.dev/config/#resolve-alias
alias: {
// 设置路径
'~': path.resolve(__dirname, './'),
// 设置别名
'@': path.resolve(__dirname, './src')
},
// https://cn.vitejs.dev/config/#resolve-extensions
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
},
// vite 相关配置
server: {
port: 9527,
host: true,
open: true,
proxy: {
// https://cn.vitejs.dev/config/#server-proxy
'/dev-api': {
target: 'http://192.168.2.207:8080',
// target: 'http://192.168.2.88:8080',
changeOrigin: true,
rewrite: (p) => p.replace(/^\/dev-api/, '')
},
'/dev-file': {
target: 'http://192.168.2.207:8080',
// target: 'http://192.168.2.88:8080',
changeOrigin: true,
rewrite: (p) => p.replace(/^\/dev-file/, '')
}
}
}
}
})