vite.config.ts
import path from "path";
import {
ConfigEnv,
defineConfig,
loadEnv
} from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import {
UnifiedViteWeappTailwindcssPlugin as uvwt
} from "weapp-tailwindcss/vite";
// 可以动态处理html文件内容的
import { createHtmlPlugin } from 'vite-plugin-html'
import VITE_USER_CONFIG from './config/appConfig.js';
// 动态修改appid，
require('./config/modifyManifest.js');
const resolve = (p : string) => {
return path.resolve(__dirname, p);
};
const isH5 = process.env.UNI_PLATFORM === 'h5'
const isApp = process.env.UNI_PLATFORM === 'app'
const weappTailwindcssDisabled = isH5 || isApp
// vite 插件配置，注意一定要把s uni 注册在 vwt 前
const vitePlugins = [uni(), uvwt({
rem2rpx: true,
disabled: weappTailwindcssDisabled
})];
// const vitePlugins = [uni()];
const postcssPlugins = [
require("autoprefixer")(),
require("tailwindcss")({
config: resolve("./tailwind.config.js"),
}),
];
if (!weappTailwindcssDisabled) {
postcssPlugins.push(
require('postcss-rem-to-responsive-pixel')({
// 转化的单位,可以变成 px / rpx
transformUnit: 'rpx',
// 32 意味着 1rem = 32rpx
rootValue: 32,
// 默认所有属性都转化
propList: ['*']
})
)
// //下方为 px 转 rpx 功能
postcssPlugins.push(
require('postcss-pxtransform')({
platform: 'weapp',
// https://taro-docs.jd.com/docs/size
// 根据你的设计稿宽度进行配置
// 可以传入一个 function
// designWidth (input) {
// if (input.file.replace(/\\+/g, '/').indexOf('@nutui/nutui-taro') > -1) {
// return 375
// }
// return 750
// },
designWidth: 750, // 375,
deviceRatio: {
640: 2.34 / 2,
// 此时应用到的规则，代表 1px = 1rpx
750: 1,
828: 1.81 / 2,
// 假如你把 designWidth 设置成 375 则使用这条规则 1px = 2rpx
375: 2 / 1
}
})
)
}
postcssPlugins.push(require('weapp-tailwindcss/css-macro/postcss'))
const viteConfig = defineConfig(({
mode,
command
} : ConfigEnv) => {
// console.log('mode', mode)
// 根据当前工作目录中的 `mode` 加载 .env 文件
// 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
// const env = loadEnv(mode, process.cwd(), '')
let env = loadEnv(mode, process.cwd())
if (!env.VITE_APP_BASE_URL && env.VITE_ROOT_DIR) {
env = Object.assign({}, loadEnv(mode, env.VITE_ROOT_DIR), env)
}
const CONFIG = Object.assign({}, VITE_USER_CONFIG.default, VITE_USER_CONFIG[process.env.UNI_SCRIPT])
if (isH5 == true) {
vitePlugins.push(createHtmlPlugin({
inject: {
data: {
// 定义了一个title 变量，可以被html中进行引用
title: CONFIG.name,
}
}
}))
}
// console.log('mode', env)
const config = {
// 环境变量配置
define: {
'process.env.VITE_USER_CONFIG': JSON.stringify(CONFIG),
},
plugins: vitePlugins,
css: {
postcss: {
plugins: postcssPlugins
}
},
}
if (command === 'serve') { // dev 独有配置
config.server = {
host: "0.0.0.0", // 开发时或独立部署时服务器的ip或域名
// port: env.VITE_PORT as unknown as number, // 服务器端口号
port: 8099, // 服务器端口号
// open: env.VITE_OPEN === 'true', // 是否自动打开浏览器
hmr: true, // 启用热更新
proxy: {
'/api': {
target: env.VITE_APP_BASE_URL, // 目标服务器地址
changeOrigin: true, // 是否修改请求头中的 Origin 字段
// rewrite: (path : string) => path.replace(/^\/api/, '')
},
'/mobile/admin': {
target: env.VITE_APP_BASE_URL, // 目标服务器地址
changeOrigin: true, // 是否修改请求头中的 Origin 字段
rewrite: (path : string) => path.replace(/^\/mobile/, '')
}
},
}
} else { // build 独有配置
// command === 'build'
/*打包的时候不输出map文件，减少大量体积*/
config.productionSourceMap = false
config.build = {
sourcemap: false,
//发布时删除 console
minify: 'terser',
terserOptions: {
compress: {
drop_console: false,
drop_debugger: false,
},
},
// lib: {
// entry: path.resolve(__dirname, './src/components/index.ts'),
// name: 'libs',
// fileName: (format) => `isafety-ui.${format}.js`,
// formats: ['es'], // 默认['es', 'umd']
// },
// },
}
config.build.rollupOptions = {
// 静态资源分类打包
// output: {
// // 确保外部化处理那些你不想打包进库的依赖
// // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
// chunkFileNames: 'static/js/[name]-[hash].js',
// entryFileNames: 'static/js/[name]-[hash].js',
// assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
// format: 'es', // 默认'es'
// // manualChunks(id) {
// // // 静态资源分拆打包
// // if (id.includes('node_modules')) {
// // return id
// // .toString()
// // .split('node_modules/')[1]
// // .split('/')[0]
// // .toString()
// // }
// // },
// }
}
if (isH5 == true) {
// config.build.rollupOptions.output.external = ['vue']
// config.build.rollupOptions.output.globals = { vue: 'Vue', }
}
}
return config
})
// https://vitejs.dev/config/
export default viteConfig
