@plugin-light/project-config-uni-vue

# 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. 如何使用安装 ```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<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` 默认值如下： ```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)