uniapp modifies the packaging directory

UniApp is a cross-platform front-end framework based on Vue.js, which can easily enable a set of codes to run on multiple terminals. When using UniApp for development, the project ultimately needs to be packaged into codes required by different terminals, such as H5, mini programs, apps, etc. This article will introduce how to modify the packaging directory of UniApp.

The default packaging directory of UniApp is "dist", which will generate the code required by different terminals. For example, the H5 code will be generated in the "h5" folder under the "dist" directory. If you need to modify the packaging directory of UniApp, you can follow the steps below.

1. Open the uni-app project

After opening the uni-app project, we need to find "webpack.dev.conf.js" under the "build" folder and "webpack.prod.conf.js" two files. These two files are configuration files needed when packaging UniApp.

2. Modify webpack.dev.conf.js

Find the "webpack.dev.conf.js" file and look for the following code:

output: {
  path: config.build.assetsRoot,
  filename: utils.assetsPath('js/[name].[chunkhash].js'),
  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
}

Among them, "config.build.assetsRoot" represents the root directory where the packaged code is stored, and the default is the "dist" directory. We can modify it to the directory name we want, for example, store the packaged code in the "build" directory:

output: {
  path: config.build.assetsRoot.replace('dist', 'build'),
  filename: utils.assetsPath('js/[name].[chunkhash].js'),
  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
}

At this point, we have completed the modification of "webpack.dev.conf.js" Modifications.

3. Modify webpack.prod.conf.js

Find the "webpack.prod.conf.js" file and look for the following code:

output: {
  path: config.build.assetsRoot,
  filename: utils.assetsPath('js/[name].[chunkhash].js'),
  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
}

Similarly, we can modify "config.build.assetsRoot" to the directory name we want.

output: {
  path: config.build.assetsRoot.replace('dist', 'build'),
  filename: utils.assetsPath('js/[name].[chunkhash].js'),
  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
}

4. Modify vue.config.js

After completing the above two steps, we also need to modify the packaging path in the "vue.config.js" file , making it consistent with the modified "webpack.dev.conf.js" and "webpack.prod.conf.js" configuration files.

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  outputDir: 'build',
  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src'),
      }
    }
  },
};

In "outputDir", we modify it to the directory name we want, such as "build".

5. Packaging project

After completing the above steps, we can repackage the entire UniApp project. At this time, the code we packaged will be stored in the directory we set. middle.

Summary

Through the above steps, we can easily modify the packaging directory of UniApp. It should be noted that when modifying the packaging directory, make sure that the directory does not exist, otherwise packaging may fail. At the same time, if there are resource references and other operations in the project, corresponding modifications need to be made based on the modified packaging path.

The above is the detailed content of uniapp modifies the packaging directory. For more information, please follow other related articles on the PHP Chinese website!