|
|
@ -1,18 +1,31 @@ |
|
|
import { fileURLToPath, URL } from 'node:url'; |
|
|
import { fileURLToPath, URL } from 'node:url'; |
|
|
|
|
|
|
|
|
import { defineConfig } from 'vite'; |
|
|
|
|
|
|
|
|
import { createHash } from 'node:crypto'; |
|
|
|
|
|
import { defineConfig, loadEnv } from 'vite'; |
|
|
import vue from '@vitejs/plugin-vue'; |
|
|
import vue from '@vitejs/plugin-vue'; |
|
|
import vueJsx from '@vitejs/plugin-vue-jsx'; // vite支持jsx写法
|
|
|
import vueJsx from '@vitejs/plugin-vue-jsx'; // vite支持jsx写法
|
|
|
import eslintPlugin from 'vite-plugin-eslint'; // vite编译时动态显示eslint校验问题
|
|
|
import eslintPlugin from 'vite-plugin-eslint'; // vite编译时动态显示eslint校验问题
|
|
|
|
|
|
import { createHtmlPlugin } from 'vite-plugin-html'; // vite编译html
|
|
|
|
|
|
|
|
|
// https://vitejs.dev/config/
|
|
|
// https://vitejs.dev/config/
|
|
|
export default defineConfig({ |
|
|
|
|
|
|
|
|
export default defineConfig(({ mode }) => { |
|
|
|
|
|
// 获取APP开头的 环境变量
|
|
|
|
|
|
const { APP_TITLE } = loadEnv(mode, process.cwd(), 'APP'); |
|
|
|
|
|
|
|
|
|
|
|
return { |
|
|
plugins: [ |
|
|
plugins: [ |
|
|
vue(), |
|
|
vue(), |
|
|
vueJsx(), |
|
|
vueJsx(), |
|
|
eslintPlugin({ |
|
|
eslintPlugin({ |
|
|
include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue'], |
|
|
include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue'], |
|
|
}), |
|
|
}), |
|
|
|
|
|
createHtmlPlugin({ |
|
|
|
|
|
inject: { |
|
|
|
|
|
data: { |
|
|
|
|
|
// 将环境变量 APP_TITLE 赋值给 title 方便 html页面使用 title 获取系统标题
|
|
|
|
|
|
title: APP_TITLE, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}), |
|
|
], |
|
|
], |
|
|
|
|
|
|
|
|
resolve: { |
|
|
resolve: { |
|
|
@ -20,4 +33,74 @@ export default defineConfig({ |
|
|
'@': fileURLToPath(new URL('./src', import.meta.url)), |
|
|
'@': fileURLToPath(new URL('./src', import.meta.url)), |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
css: { |
|
|
|
|
|
modules: { |
|
|
|
|
|
generateScopedName: (name, filename, css) => { |
|
|
|
|
|
const [, onlyFileName] = /\/(\w+)\.vue/g.exec(filename); |
|
|
|
|
|
const cssHash = createHash('sha256').update(css); |
|
|
|
|
|
const hex = cssHash.digest('hex'); |
|
|
|
|
|
const hash5 = `${hex}`.substring(0, 5); |
|
|
|
|
|
return `${onlyFileName}_${name}_${hash5}`; |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
envPrefix: ['APP_', 'VITE_'], |
|
|
|
|
|
|
|
|
|
|
|
// css: {
|
|
|
|
|
|
// preprocessorOptions: {
|
|
|
|
|
|
// less: {
|
|
|
|
|
|
// javascriptEnabled: true,
|
|
|
|
|
|
// // 自动导入 less声明的全局变量
|
|
|
|
|
|
// additionalData: `@import "${fileURLToPath(new URL('./src/styles/variables.less', import.meta.url))}";`,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// },
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
|
|
|
|
// esbuild: { loader: { '.js': '.jsx' } },
|
|
|
|
|
|
|
|
|
|
|
|
server: { |
|
|
|
|
|
// host: true, // 监听所有地址
|
|
|
|
|
|
proxy: { |
|
|
|
|
|
// 使用 proxy 实例
|
|
|
|
|
|
// '/api': {
|
|
|
|
|
|
// // target: 'http://192.168.10.79:9999',
|
|
|
|
|
|
// // target: 'http://192.168.10.111:9900',
|
|
|
|
|
|
// // target: 'http://192.168.10.32:8102',
|
|
|
|
|
|
// // target: 'http://192.168.10.32:9999',
|
|
|
|
|
|
// changeOrigin: true,
|
|
|
|
|
|
// rewrite: (path) => path.replace(/^\/api/, ''),
|
|
|
|
|
|
// },
|
|
|
|
|
|
// 案例
|
|
|
|
|
|
// // 字符串简写写法：http://localhost:5173/foo -> http://localhost:4567/foo
|
|
|
|
|
|
// '/foo': 'http://localhost:4567',
|
|
|
|
|
|
// // 带选项写法：http://localhost:5173/api/bar -> http://jsonplaceholder.typicode.com/bar
|
|
|
|
|
|
// '/api': {
|
|
|
|
|
|
// target: 'http://jsonplaceholder.typicode.com',
|
|
|
|
|
|
// changeOrigin: true,
|
|
|
|
|
|
// rewrite: (path) => path.replace(/^\/api/, ''),
|
|
|
|
|
|
// },
|
|
|
|
|
|
// // 正则表达式写法：http://localhost:5173/fallback/ -> http://jsonplaceholder.typicode.com/
|
|
|
|
|
|
// '^/fallback/.*': {
|
|
|
|
|
|
// target: 'http://jsonplaceholder.typicode.com',
|
|
|
|
|
|
// changeOrigin: true,
|
|
|
|
|
|
// rewrite: (path) => path.replace(/^\/fallback/, ''),
|
|
|
|
|
|
// },
|
|
|
|
|
|
// // 使用 proxy 实例
|
|
|
|
|
|
// '/api': {
|
|
|
|
|
|
// target: 'http://jsonplaceholder.typicode.com',
|
|
|
|
|
|
// changeOrigin: true,
|
|
|
|
|
|
// configure: (proxy, options) => {
|
|
|
|
|
|
// // proxy 是 'http-proxy' 的实例
|
|
|
|
|
|
// }
|
|
|
|
|
|
// },
|
|
|
|
|
|
// // 代理 websockets 或 socket.io 写法：ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
|
|
|
|
|
|
// '/socket.io': {
|
|
|
|
|
|
// target: 'ws://localhost:5174',
|
|
|
|
|
|
// ws: true,
|
|
|
|
|
|
// },
|
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}; |
|
|
}); |
|
|
}); |
|
|
|
xiaosi
1 year ago