uniapp是一款基于vue.js的跨平台前端框架，可以轻松实现一套代码在多个终端上运行。在使用uniapp进行开发时，最终需要将项目打包成不同终端所需要的代码，如h5、小程序、app等。本文将介绍如何修改uniapp的打包目录。
UniApp默认的打包目录是“dist”，将生成不同终端所需要的代码，如H5代码将生成到“dist”目录下的“h5”文件夹中。如果需要修改UniApp的打包目录，可以按照以下步骤进行操作。
- 打开uni-app项目
在打开uni-app项目后，我们需要找到“build”文件夹下的“webpack.dev.conf.js”和“webpack.prod.conf.js”两个文件。这两个文件是UniApp打包时需要用到的配置文件。
- 修改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”的修改。
- 修改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')
}- 修改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”。
- 打包项目
在完成以上步骤后，我们可以重新打包整个UniApp项目，此时我们打包出来的代码将会存储在我们所设置的目录中。
总结
通过以上步骤，我们可以轻松修改UniApp的打包目录。需要注意的是，在修改打包目录时，要确保目录不存在，否则可能会出现打包失败的情况。同时，如果项目中有进行资源引用等操作，也需要根据修改后的打包路径进行相应的修改。
