uniapp修改打包目录

UniApp是一款基于Vue.js的跨平台前端框架，可以轻松实现一套代码在多个终端上运行。在使用UniApp进行开发时，最终需要将项目打包成不同终端所需要的代码，如H5、小程序、App等。本文将介绍如何修改UniApp的打包目录。

UniApp默认的打包目录是“dist”，将生成不同终端所需要的代码，如H5代码将生成到“dist”目录下的“h5”文件夹中。如果需要修改UniApp的打包目录，可以按照以下步骤进行操作。

1. 打开uni-app项目

在打开uni-app项目后，我们需要找到“build”文件夹下的“webpack.dev.conf.js”和“webpack.prod.conf.js”两个文件。这两个文件是UniApp打包时需要用到的配置文件。

2. 修改webpack.dev.conf.js

找到“webpack.dev.conf.js”文件，并寻找以下代码：

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

其中，“config.build.assetsRoot”代表打包后代码存放的根目录，默认为“dist”目录。我们可以将其修改为我们想要的目录名，例如将打包后的代码存放到“build”目录中：

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

此时，我们完成了对“webpack.dev.conf.js”的修改。

3. 修改webpack.prod.conf.js

找到“webpack.prod.conf.js”文件，并寻找以下代码：

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

同样地，我们可以将“config.build.assetsRoot”修改为我们想要的目录名。

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

4. 修改vue.config.js

在完成以上两步操作后，我们还需要在“vue.config.js”文件中修改打包的路径，使其与修改后的“webpack.dev.conf.js”和“webpack.prod.conf.js”配置文件一致。

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

在“outputDir”中，我们将其修改为我们想要的目录名，如“build”。

5. 打包项目

在完成以上步骤后，我们可以重新打包整个UniApp项目，此时我们打包出来的代码将会存储在我们所设置的目录中。

总结

通过以上步骤，我们可以轻松修改UniApp的打包目录。需要注意的是，在修改打包目录时，要确保目录不存在，否则可能会出现打包失败的情况。同时，如果项目中有进行资源引用等操作，也需要根据修改后的打包路径进行相应的修改。

以上是uniapp修改打包目录的详细内容。更多信息请关注PHP中文网其他相关文章！