# Uni App Vue 项目基础配置

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/project-config-uni-vue">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/project-config-uni-vue">
  <img src="https://img.shields.io/npm/v/@plugin-light/project-config-uni-vue">
  <img src="https://img.shields.io/npm/l/@plugin-light/project-config-uni-vue">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

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

## 1. 作者

**novlan1**

## 2. 如何使用

安装

```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(), {});
```

## 3. 类型说明

### 3.1. getUniVueConfig 参数

[完整类型定义](https://github.com/novlan1/plugin-light/blob/master/packages/project-config-uni-vue/src/types.ts)。


| 属性 | 类型 | <p style="width:300px">说明</p> | <p style="width:300px">默认值</p> |
| --- | --- | --- | --- |
| useTransformDynamicCompLoader | `boolean` | 是否使用[转换动态引入](./webpack-loader-transform-dynamic-comp.html) `loader` | - |
| useReplaceVueKeyLoader | `boolean` | 是否使用[替换 vue key](./webpack-loader-replace-vue-key.html) `loader` | - |
| useSwipeComponentLoader | `boolean` | 是否使用[处理 swipe 组件](./webpack-loader-swipe-component.html) `loader` | - |
| useInsertGlobalCompLoader | `boolean` | 是否使用[自动插入全局组件](./webpack-loader-insert-global-comp.html) `loader` | - |
| insertGlobalCompLoaderOptions | `any` | [自动插入全局组件](./webpack-loader-insert-global-comp.html)选项 | - |
| useReplaceLibraryLoader | `boolean` | 是否使用[替换三方库](./webpack-loader-replace-library.html) `loader` | - |
| replaceLibraryLoaderOptions | `any` | [替换三方库](./webpack-loader-replace-library.html)选项 | - |
| useReplaceTemplateTagLoader | `boolean` | 是否使用[替换模板标签](./webpack-loader-replace-template-tag.html) | - |
| replaceTemplateTagLoaderOptions | `any` | [替换模板标签](./webpack-loader-replace-template-tag.html)选项 | - |
| useVLazyLoader | `boolean` | 是否使用 [v-lazy](./webpack-loader-v-lazy.html) `loader` | - |
| vLazyLoaderOptions | `any` | [v-lazy](./webpack-loader-v-lazy.html) `loader` 选项 | - |
| useInsertPageMetaLoader | `boolean` | 是否使用 [insert-page-meta](./webpack-loader-insert-page-meta.html) loader | - |
| insertPageMetaLoaderOptions | `IInsertGlobalCompOptions` | [insert-page-meta](./webpack-loader-insert-page-meta.html) `loader` 选项 | - |
| crossModuleStyleLoaderOptions | `ICrossModuleStyleOptions` | [cross-module-style](./webpack-loader-cross-module-style.html) `loader` 选项 | - |
| useCopyDirPlugin | `boolean` | 是否使用 [copy-dir](./webpack-plugin-copy-dir.html) 插件 | - |
| copyDirPluginOptions | `ICopyDirOptions` | [copy-dir](./webpack-plugin-copy-dir.html) 插件选项 | - |
| useDispatchScriptPlugin | `boolean` | 是否使用[脚本派发](./webpack-plugin-dispatch-script.html)插件 | - |
| dispatchScriptPluginOptions | `IDispatchScriptOptions` | [脚本派发](./webpack-plugin-dispatch-script.html)插件选项 | - |
| useDispatchVuePlugin | `boolean` | 是否使用[组件派发](./webpack-plugin-dispatch-vue.html)插件 | - |
| dispatchVuePluginOptions | `IDispatchVueOptions` | [组件派发](./webpack-plugin-dispatch-vue.html)插件选项 | - |
| useXSS | `boolean` | 是否使用 `xss` 方法包裹 `v-html` 内容，需提前注册全局方法 | - |
| useAddPlaceHolderPlugin | `boolean` | 是否使用 [add-placeholder](./webpack-plugin-add-placeholder.html) 插件，为 `true` 时，也会使用动态引入组件的替换插件 | - |
| remToRpxPluginMpOptions | `IRemToRpxOptions` | 小程序下，[rem-to-rpx](./webpack-plugin-rem-to-rpx.html) 插件选项 | - |
| 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](./webpack-plugin-fix-mini-css-plugin.html) 插件 | - |
| 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` | 是否使用 [replace-uni-h5](./webpack-plugin-replace-uni-h5.html) 插件 | - |
| useRemoveScopedLoader | `any` | 是否使用 [remove-scoped](./webpack-loader-remove-scoped.html) `loader` | - |
| outputDirMode | `string` | 打包产物目录 | `dist/${VUE_APP_DIR}/static` |
| usePMDNetworkV2 | `boolean` | 是否使用 `pmd-network-v2` 替代 `pmd-network` | `false` |

### 3.2. transpileDependencies

`transpileDependencies` 默认值如下：

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

### 3.3. adapterDirs

`adapterDirs` 默认值如下：

```ts
[
  'comm',
  'common',
  'component',
  'live-component',
  'logic',
  'local-logic',
  'local-component',
  'login',
  'pages',
  'static',
  'node-modules',
]
```

## 4. 常见问题

### 4.1. 打包产物分析怎么做

当 `process.env.npm_config_report` 不为 `falsy` 时，本工具会使用 `webpack-bundle-analyzer` 插件，开发者可用来进行打包分析。

当传入 `saveBundleAnalyzeHtml` 不为 `falsy` 时，会在 `production` 模式下，保存打包分析产物到 `my-bundle-analyze.html` 文件中，可以在流水线中进行归档。

### 4.2. 调试模式怎么打开

当 `process.env.DEBUG_MODE` 不为 `falsy` 时，本工具会设置 `configureWebpack.optimization.minimize` 为 `false`，开发者可以用来进行产物的代码分析。

### 4.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`。

### 4.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}/`
```

## 5. 更新日志

[点此查看](./CHANGELOG.md)