Plugin Light

Appearance

Uni App Vue 项目基础配置 ​

Vue.config.js 配置，适用于 uni-app 项目。

1. 如何使用 ​

安装

bash
pnpm add @plugin-light/project-config-uni-vue -D

在 vue.config.js 中添加如下设置：

js
const { getUniVueConfig } = require('@plugin-light/project-config-uni-vue');
const { merge } = require('webpack-merge');

module.exports = merge(getUniVueConfig(), {});

2. 类型说明 ​

2.1. getUniVueConfig 参数 ​

完整类型定义。

属性类型说明默认值
useTransformDynamicCompLoaderboolean是否使用转换动态引入的 loader-
useReplaceVueKeyLoaderboolean是否使用替换 vue key loader-
useSwipeComponentLoaderboolean是否使用处理 swipe 组件的 loader-
useInsertGlobalCompLoaderboolean是否使用自动插入全局组件 loader-
insertGlobalCompLoaderOptionsany自动插入全局组件选项-
useReplaceLibraryLoaderboolean是否使用替换三方库 loader-
replaceLibraryLoaderOptionsany替换三方库选项-
useReplaceTemplateTagLoaderboolean是否使用替换模板标签-
replaceTemplateTagLoaderOptionsany替换模板标签选项-
useVLazyLoaderboolean是否使用 v-lazy loader-
vLazyLoaderOptionsanyv-lazy loader 选项-
useInsertPageMetaLoaderboolean是否使用插入 page-meta loader-
insertPageMetaLoaderOptionsIInsertGlobalCompOptions插入 page-meta loader 选项-
crossModuleStyleLoaderOptionsICrossModuleStyleOptionscross-module-style loader 选项-
useCopyDirPluginboolean是否使用 copy dir 插件-
copyDirPluginOptionsICopyDirOptionscopy dir 插件选项-
useDispatchScriptPluginboolean是否使用脚本派发插件-
dispatchScriptPluginOptionsIDispatchScriptOptions脚本派发插件选项-
useDispatchVuePluginboolean是否使用组件派发插件-
dispatchVuePluginOptionsIDispatchVueOptions组件派发插件选项-
useXSSboolean是否使用 xss 方法包裹 v-html 内容，需提前注册全局方法-
useAddPlaceHolderPluginboolean是否使用 add placeholder 插件，为 true 时，也会使用动态引入组件的替换插件-
remToRpxPluginMpOptionsIRemToRpxOptions小程序下, rem to rpx 插件选项-
genVersionWebPluginOptionsIGenVersionOptionsweb 下，生成版本插件选项-
adapterDirsArray<string>需移动的外层目录列表-
transpileDependenciesArray<string>待转换的三方依赖-
lintOnSaveboolean是否校验 eslint-
useH5SplitChunksboolean | Record<string, any>是否使用 H5 的 splitChunks 配置，如果是对象类型，则直接传递给 config.optimization.splitChunks-
useFixMiniCssPluginboolean是否使用 fix-mini-css-plugin-
aegisWebSdkExternalboolean | stringaegis-web-sdk 是否使用外链，传入 string 会覆盖之前的链接true
uniSimpleRouterExternalboolean | stringuni-simple-router 是否使用外链，传入 string 会覆盖之前的链接false
axiosExternalboolean | stringaxios 是否使用外链false
vueLazyloadExternalboolean | stringvue-lazy 是否使用外链false
customPreloadboolean | ICustomPreloadOptions是否使用自定义预加载false
needSourceMapboolean是否需要 sourceMap，H5、生产环境、release 分支为 true，其他为 false-
usePMDBusinessAliasboolean是否使用 pmd-business 为 aliasfalse
useWorkBoxPluginRecord<string, any>是否使用 work-box-
saveBundleAnalyzeHtmlboolean | Record<string, any>是否保存 bundle-analyze 结果到 html 中-
useReplaceUniH5PluginIReplaceUniH5PluginOption是否使用 replaceUniH5Plugin-
useRemoveScopedLoaderany是否使用 removeScoped loader-
outputDirModestring打包产物目录dist/${VUE_APP_DIR}/static

2.2. transpileDependencies ​

transpileDependencies 默认值如下：

ts
['press-ui', 'press-plus', 'pmd-merchant-ui'];

2.3. adapterDirs ​

adapterDirs 默认值如下：

ts
[
  '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 的默认值为：

ts
checkH5() && process.env.NODE_ENV === 'production' && getGitCurBranch(__dirname) === 'release';

传入布尔值时，会取传入的值。

内部实现方式：

ts
configureWebpack: {
  ...(needSourceMap ? {
    devtool: 'hidden-source-map',
  } : {}),
}

此外，研发平台子项目中填有 TAM_ID（上报ID） 的话，会在发布正式环境时，将 sourceMap 文件后上传到 TAM 平台对应的项目下。

可以在查看错误文件的时候，选择对应的 sourceMap，注意不用带域名，直接输入文件名，比如 main.1212.js.map。

3.4. 业务中获取分支名等变量 ​

流水线会注入以下环境变量：

bash
# 分支
VUE_APP_BRANCH

# 发布人
VUE_APP_AUTHOR

业务可以参考下面的方式获取：

ts
const CUR_BRANCH = (process.env.VUE_APP_BRANCH || 'develop').replace(/\//, '.');

const shareUrl = `https://foo/bar.${CUR_BRANCH}/`

4. 更新日志 ​

点此查看