uni-app H5平台打包配置

「Offer 驾到，掘友接招！我正在参与2022春招系列活动-经验复盘，点击查看 活动详情

问题

最近接手了一个uni-app项目，项目在测试环境构建后，页面还是之前老的页面。经过定位后，确定是缓存问题，uni-app项目在h5平台下打包,vue文件输出的js文件名默认没有加上hash。

创建vue.config.js

vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 webpack 等编译选项，具体规范参考：

• uni-app文档
• vue cli文档

在项目目录下创建vue.config.js文件

vue.config.js代码

需要判断当前是否为h5平台，否则运行小程序会报错； 需要判断当前运行的命令为打包命令，根据env``中npm_lifecycle_script`属性

// vue.config.js
let filePath = ''
//编译环境判断，可以根据不同环境来做对应的配置
if (process.env.UNI_PLATFORM === 'h5') {
  filePath = 'static/js/'
}
module.exports = {
  configureWebpack: config => {
    // 判断当前是否为build模式， 输出重构  打包编译后的 文件目录 文件名称 【模块名称.文件hash】
    if (process.env.UNI_PLATFORM === 'h5' && process.env.npm_lifecycle_script.includes('uni-build')) {
      config.output.filename = `${filePath}[name].[chunkhash:8].js`
      config.output.chunkFilename = `${filePath}[name].[chunkhash:8].js`
    }
  },

结果

h5平台打包，查看dist文件，文件名正常加上hash

运行 npm run build:h5

在HBuilder中打包小程序，如果运行失败，删除dist目录重试。