I am participating in the 2022 Spring Recruitment series of activities – experience review, click to seeEvent details

The problem

Recently I took over a uni-App project. After the project was built in the test environment, the page was still the same as before. The uni-app project is packaged under THE H5 platform, and the JS file name output by vue file does not add hash by default.

Create a vue. Config. Js

Vue. Config. js is an optional configuration file that is automatically loaded if it exists in the root directory of the project and is generally used to configure compilation options such as webpack.

  • Uni – app documents
  • Vue cli document

Create the vue.config.js file in the project directory

Vue. Config. Js code

You need to check whether the current platform is H5. Otherwise, an error occurs when running the small program. To determine if the command currently running is a package command, use the npm_lifecycle_script property in env

// vue.config.js
let filePath = ' '
// According to the compilation environment, you can do the corresponding configuration according to different environments
if (process.env.UNI_PLATFORM === 'h5') {
  filePath = 'static/js/'
}
module.exports = {
  configureWebpack: config= > {
    // Check whether the current mode is build and output the refactoring package compiled file directory file name [module name.file 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`}},Copy the code

The results of

H5 platform package, check dist file, file name normal hash

Run NPM run build:h5

Package the applet in HBuilder, and if it fails, delete the dist directory and try again.