需求:在一个项目有公共的依赖和组件,但是两个模块又没有业务上的关联,这个时候我们需要用到分包,
我的env.test对应是mono2中的变量打包,根据人个需求使用
在根路径下删除原来的index.html,然后在src下建两个目录分别为mono1,mono2
如果页面都抽离成模块后记得改变，记得要修改文件之间的引用关系，接下来我们详细看项目配置方面的修改。
vite.config.ts
/*
* @Author: 周云芳 164591357@qq.com
* @Date: 2022-05-23 21:29:09
* @LastEditors: 周云芳 164591357@qq.com
* @LastEditTime: 2022-06-02 17:29:03
* @FilePath: \vue3\vue3-ts\vite.config.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
const fs = require("fs")
// const dotenv = require("dotenv")// Dotenv 是一个零依赖的模块，它能将环境变量中的变量从 .env 文件加载到 process.env 中
export default ({ command, mode }: { command: any, mode: any }) => {
// 根据当前工作目录中的 `mode` 加载 .env 文件
// 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
const envConfig: any = loadEnv(mode, process.cwd(), '')
let pageEntry = '';
// let target = envConfig.VITE_TARGET || 'default'
let NODE_ENV = envConfig.NODE_ENV || 'development';
console.log('envConfig------>', NODE_ENV);
if (NODE_ENV == 'production') {
pageEntry = resolve(__dirname, 'src/packages/mono1/index.html')
}
if (NODE_ENV == 'test') {
pageEntry = resolve(__dirname, 'src/packages/mono2/index.html')
}
//views文件夹中添加文件即可，会获取里面的文件夹名在pages中生产模板
return defineConfig({
plugins: [vue()],
base: NODE_ENV === 'development' ? '/' : './',
// vite config
// root: "./src/",//设置为src文件夹内(项目入口)
// 静态资源服务文件夹
publicDir: 'public',
// envDir: '../',//(检测环境变量文件所在文件夹)
// 因为root设为了src所以需要../回到上一层,也可以把.env文件放到src内指定加载环境变量文件的目录,相对于root路径
server: {
host: '0.0.0.0',//解决 Network: use `--host` to expose
port: envConfig.VITE_PORT,//定义端口
// port: 8080,
open: true, // 是否自动在浏览器打开
https: false, // 是否开启 https
},
resolve: {//配置别名,需要配置tsconfig.json文件，compilerOptions中编辑器会自动读取
alias: [
{
find: '@',
replacement: resolve(__dirname, 'src')
},
]
},
build: {
target: 'modules',//浏览器兼容性modules|esnext
sourcemap: false,//构建后是否生成soutrce map文件
minify: 'terser', // 混淆器,terser构建后文件体积更小
// outDir: envConfig.VITE_OUTPUT_DIR, //指定输出文件包名
outDir: 'dist',
assetsDir: 'assets', // 指定生成静态资源的存放路径
chunkSizeWarningLimit: 1500, //警报门槛，限制大文件大小B为单位
assetsInlineLimit: 4096,//小于此阈值的导入或引用资源将内联为base64编码,以避免额外的http请求,设置为0可以完全禁用此项
brotliSize: false,//启用|禁用brotli压缩大小报告
// 清除console和debugger(minify: 'terser',)设置后这个terserOptions才有用
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
},
rollupOptions: {
input: pageEntry,
output: {//自动分割包名输出 chunkSizeWarningLimit 配置大小
chunkFileNames: 'js/[name]-[hash].js',//入口文件名
entryFileNames: 'js/[name]-[hash].js',//出口文件名位置
assetFileNames: '[ext]/[name]-[hash].[ext]',//静态文件名位置
// assetFileNames: 'assets/static/[name]-[hash].[ext]',//静态文件名位置
manualChunks(id: any) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
}
}
},
}
})
}package.json文件写入
dev没有另做配置如果启动dev可能会找不到页面,只能使用dev:mono1或dev:mono2会启动对应的文件
?
?
?
?
其中build默认配置为生产环境的打包
build:test配置为测试环境的打包,本人比较懒,所以没有一一做配置但是大同小异,根据自己的需求配置就可以(当前如果打包测试环境会把env.test和mono2的内容打进去,生产环境会把env.production和mono1打包进去)
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview",
"dev:mono1": "vite serve src/packages/mono1/ --config ./vite.config.ts",
"dev:mono2": "vite serve src/packages/mono2/ --config ./vite.config.ts",
"build:test": "cross-env vite build --mode test"
},?打包后生成的文件目录,因配置路径问题这里也会对应的显示在文件下;可以把index.html手动放在dist文件下也是可以的?
https://gitee.com/zhouyunfang_admin/vue3-typescript-vite-element/tree/req_1.2/