1.0.0 • Published 5 months ago
@plugin-light/project-config-uni-vue v1.0.0
Uni App Vue 项目基础配置
Vue.config.js 配置,适用于 uni-app 项目。
1. 如何使用
安装
pnpm add @plugin-light/project-config-uni-vue -D在 vue.config.js 中添加如下设置:
const { getUniVueConfig } = require('@plugin-light/project-config-uni-vue');
const { merge } = require('webpack-merge');
module.exports = merge(getUniVueConfig(), {});2. 类型说明
2.1. getUniVueConfig 参数
| 属性 | 类型 | 说明 | 默认值 |
|---|---|---|---|
| useTransformDynamicCompLoader | boolean | 是否使用转换动态引入的 loader | - |
| useReplaceVueKeyLoader | boolean | 是否使用替换 vue key loader | - |
| useSwipeComponentLoader | boolean | 是否使用处理 swipe 组件的 loader | - |
| useInsertGlobalCompLoader | boolean | 是否使用自动插入全局组件 loader | - |
| insertGlobalCompLoaderOptions | any | 自动插入全局组件选项 | - |
| useReplaceLibraryLoader | boolean | 是否使用替换三方库 loader | - |
| replaceLibraryLoaderOptions | any | 替换三方库选项 | - |
| useReplaceTemplateTagLoader | boolean | 是否使用替换模板标签 | - |
| replaceTemplateTagLoaderOptions | any | 替换模板标签选项 | - |
| useVLazyLoader | boolean | 是否使用 v-lazy loader | - |
| vLazyLoaderOptions | any | v-lazy loader 选项 | - |
| useInsertPageMetaLoader | boolean | 是否使用插入 page-meta loader | - |
| insertPageMetaLoaderOptions | IInsertGlobalCompOptions | 插入 page-meta loader 选项 | - |
| crossModuleStyleLoaderOptions | ICrossModuleStyleOptions | cross-module-style loader 选项 | - |
| useCopyDirPlugin | boolean | 是否使用 copy dir 插件 | - |
| copyDirPluginOptions | ICopyDirOptions | copy dir 插件选项 | - |
| useDispatchScriptPlugin | boolean | 是否使用脚本派发插件 | - |
| dispatchScriptPluginOptions | IDispatchScriptOptions | 脚本派发插件选项 | - |
| useDispatchVuePlugin | boolean | 是否使用组件派发插件 | - |
| dispatchVuePluginOptions | IDispatchVueOptions | 组件派发插件选项 | - |
| useXSS | boolean | 是否使用 xss 方法包裹 v-html 内容,需提前注册全局方法 | - |
| useAddPlaceHolderPlugin | boolean | 是否使用 add placeholder 插件,为 true 时,也会使用动态引入组件的替换插件 | - |
| remToRpxPluginMpOptions | IRemToRpxOptions | 小程序下, rem to rpx 插件选项 | - |
| genVersionWebPluginOptions | IGenVersionOptions | web 下,生成版本插件选项 | - |
| adapterDirs | Array<string> | 需移动的外层目录列表 | - |
| transpileDependencies | Array<string> | 待转换的三方依赖 | - |
| lintOnSave | boolean | 是否校验 eslint | - |
| useH5SplitChunks | boolean \| Record<string, any> | 是否使用 H5 的 splitChunks 配置,如果是对象类型,则直接传递给 config.optimization.splitChunks | - |
| useFixMiniCssPlugin | boolean | 是否使用 fix-mini-css-plugin | - |
| aegisWebSdkExternal | boolean \| string | aegis-web-sdk 是否使用外链,传入 string 会覆盖之前的链接 | true |
| uniSimpleRouterExternal | boolean \| string | uni-simple-router 是否使用外链,传入 string 会覆盖之前的链接 | false |
| axiosExternal | boolean \| string | axios 是否使用外链 | false |
| vueLazyloadExternal | boolean \| string | vue-lazy 是否使用外链 | false |
| customPreload | boolean \| ICustomPreloadOptions | 是否使用自定义预加载 | false |
| needSourceMap | boolean | 是否需要 sourceMap,H5、生产环境、release 分支为 true,其他为 false | - |
| usePMDBusinessAlias | boolean | 是否使用 pmd-business 为 alias | false |
| useWorkBoxPlugin | Record<string, any> | 是否使用 work-box | - |
| saveBundleAnalyzeHtml | boolean \| Record<string, any> | 是否保存 bundle-analyze 结果到 html 中 | - |
| useReplaceUniH5Plugin | IReplaceUniH5PluginOption | 是否使用 replaceUniH5Plugin | - |
| useRemoveScopedLoader | any | 是否使用 removeScoped loader | - |
| outputDirMode | string | 打包产物目录 | dist/${VUE_APP_DIR}/static |
2.2. transpileDependencies
transpileDependencies 默认值如下:
['press-ui', 'press-plus', 'pmd-merchant-ui'];2.3. adapterDirs
adapterDirs 默认值如下:
[
'comm',
'common',
'component',
'live-component',
'logic',
'local-logic',
'local-component',
'login',
'pages',
'static',
'node-modules',
]3. 常见问题
3.1. 打包产物分析怎么做
当 process.env.npm_config_report 不为 falsy 时,本工具会使用 webpack-bundle-analyzer 插件,开发者可用来进行打包分析。
当传入 saveBundleAnalyzeHtml 不为 falsy 时,会在 production 模式下,保存打包分析产物到 my-bundle-analyze.html 文件中,可以在流水线中进行归档。
3.2. 调试模式怎么打开
当 process.env.DEBUG_MODE 不为 falsy 时,本工具会设置 configureWebpack.optimization.minimize 为 false,开发者可以用来进行产物的代码分析。
3.3. sourceMap 怎么配置
options.needSourceMap 的默认值为:
checkH5() && process.env.NODE_ENV === 'production' && getGitCurBranch(__dirname) === 'release';传入布尔值时,会取传入的值。
内部实现方式:
configureWebpack: {
...(needSourceMap ? {
devtool: 'hidden-source-map',
} : {}),
}此外,研发平台子项目中填有 TAM_ID(上报ID) 的话,会在发布正式环境时,将 sourceMap 文件后上传到 TAM 平台对应的项目下。
可以在查看错误文件的时候,选择对应的 sourceMap,注意不用带域名,直接输入文件名,比如 main.1212.js.map。
3.4. 业务中获取分支名等变量
流水线会注入以下环境变量:
# 分支
VUE_APP_BRANCH
# 发布人
VUE_APP_AUTHOR业务可以参考下面的方式获取:
const CUR_BRANCH = (process.env.VUE_APP_BRANCH || 'develop').replace(/\//, '.');
const shareUrl = `https://foo/bar.${CUR_BRANCH}/`