# 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 参数
[完整类型定义](https://github.com/novlan1/plugin-light/blob/master/packages/project-config-uni-vue/src/types.ts)。
| 属性 | 类型 | 说明 | 默认值 |
| ------------------------------- | ---------------------------------- | --------------------------------------------------------------------------------------------- | ---------------------------- |
| 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` | 需移动的外层目录列表 | - |
| transpileDependencies | `Array` | 待转换的三方依赖 | - |
| lintOnSave | `boolean` | 是否校验 eslint | - |
| useH5SplitChunks | `boolean \| Record` | 是否使用 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` | 是否使用 work-box | - |
| saveBundleAnalyzeHtml | `boolean \| Record` | 是否保存 bundle-analyze 结果到 html 中 | - |
| useReplaceUniH5Plugin | `IReplaceUniH5PluginOption` | 是否使用 replaceUniH5Plugin | - |
| useRemoveScopedLoader | `any` | 是否使用 removeScoped loader | - |
| outputDirMode | `string` | 打包产物目录 | `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. 更新日志
[点此查看](./CHANGELOG.md)