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

开箱即用的项目配置,适用于 uni-app Vue2.x 项目
5,205
Install
npm install @plugin-light/project-config-uni-vue
Latest Version:1.0.1
License:MIT
Last Updated:Jan 29, 2026
Links: npm
Maintainer: yanggwcn

Uni App Vue 项目基础配置

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

1. 作者

novlan1

2. 如何使用

安装

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

3. 类型说明

3.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 是否使用 insert-page-meta loader -
insertPageMetaLoaderOptions IInsertGlobalCompOptions insert-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 插件 -
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 插件 -
useRemoveScopedLoader any 是否使用 remove-scoped loader -
outputDirMode string 打包产物目录 dist/${VUE_APP_DIR}/static
usePMDNetworkV2 boolean 是否使用 pmd-network-v2 替代 pmd-network false

3.2. transpileDependencies

transpileDependencies 默认值如下:

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

3.3. adapterDirs

adapterDirs 默认值如下:

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

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。

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

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

# 分支
VUE_APP_BRANCH

# 发布人
VUE_APP_AUTHOR

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

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

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

5. 更新日志

点此查看

Related Packages

@plugin-light/project-config-vue

开箱即用的项目配置,适用于 Vue2.x 项目

5,354
@plugin-light/project-config-uni-vite

开箱即用的项目配置,适用于 uni-app Vue3.x 项目

5,744
ml-ui

ml-ui,一套为开发者、设计师和产品经理准备的基于 Vue 2 的移动端组件库

2,336 77
@uni_toolkit/webpack-plugin-component-config

一个用于 UniApp 项目的 Webpack 插件,用于处理 Vue 文件中的 `<component-config>`...

6,153 30
@uni_toolkit/webpack-plugin-component-insight

一个用于 uni-app Vue2 项目的 Webpack 插件,用于分析组件被哪些页面使用、使用了多...

2,399 30

Version History

Version Released License
1.0.1 MIT
1.0.0 MIT
0.0.4
0.0.3
0.0.2