Skip to content

Vue 项目基础配置

webpack 配置,适用于基于 Vue 的 web 项目。

1. 如何使用

安装

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

vue.config.js 中添加如下设置:

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

module.exports = merge(WEBPACK_BASE_CONFIG, {
  transpileDependencies: ['press-ui'],
});

或者使用 getWebpackBaseConfig 方法:

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

module.exports = merge(getWebpackBaseConfig({
  isUseVueLoader: true,
  isVue3: false,
  useXSS: true,
}), {
  transpileDependencies: ['press-ui'],
});

2. 类型及默认参数

2.1. getWebpackBaseConfig 参数

getWebpackBaseConfig 接收一个对象作为参数。完整类型定义

属性类型说明默认值
portnumber端口-
httpsboolean是否使用 https-
isUseVueLoaderboolean是否使用 vue-loadertrue
isVue3boolean是否是 Vue3 项目false
useXSSboolean是否使用 XSS 过滤,需要提前在 Vue 原型上挂载 xss 方法true
useIfDefLoaderboolean是否使用 ifdef-loadertrue
handleIfDefFilesArray<string>ifdef-loader 要处理的文件/(press-ui|component|press-plus|@tencent\/pmd-).*(\.vue|\.ts|\.js|\.css|\.scss)$/
terserPureFuncsArray<string>打包去除 console 日志的方法['console.log', 'console.table']
transpileDependenciesArray<string>需要编译的第三方依赖-
shadowProjectMapRecord<string, string>映射的项目-
customCdnUrlsArray<string>自定义的 cdn 链接,用于 externals-
usePMDBusinessAliasboolean是否使用 pmd-business alias-
useWorkBoxPlugin{}是否使用 work-box-
lessAliasboolean不加额外的 aliasfalse
useUniSimpleRouterCDNboolean是否要将 uni-simple-router 设置外链 cdnfalse
outputDirModestring打包产物目录dist/${VUE_APP_DIR}/static

2.2. handleIfDefFiles

handleIfDefFiles 默认值如下:

ts
/(press-ui|component|press-plus).*(\.vue|\.ts|\.js|\.css|\.scss)$/;

2.3. transpileDependencies

transpileDependencies 默认值如下:

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

  'pmd-aegis',
  'pmd-app-info',
  'pmd-config',
  'pmd-location',
  'pmd-login',
  'pmd-network',
  'pmd-report',
  'pmd-tools',
  'pmd-types',
  'pmd-widget',
  'pmd-vue',
  'pmd-jsapi',
];

3. 常见问题

3.1. console 日志去除是如何做的,以及如何保留

生产环境下,即process.env.NODE_ENVproduction时,默认去掉console日志,可以通过terserPureFuncs传递空数组来恢复显示。

注意同时去掉babel插件transform-remove-console

3.2. 打包产物分析怎么做

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

否则,在 production 模式下,保存打包分析产物到 my-bundle-analyze.html 文件中,可以在流水线中进行归档。

3.3. 调试模式怎么打开

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

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}/`

3.5. 业务库中条件编译不生效

默认情况下,条件编译工具并不处理业务库代码,可以通过 handleIfDefFiles 字段调整配置,比如:

ts
getWebpackBaseConfig({
  handleIfDefFiles: /(src|press-ui|component|press-plus|@tencent\/pmd-).*(\.vue|\.ts|\.js|\.css|\.scss)$/,
})

4. 更新日志

点此查看