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的打包目录。需要注意的是,在修改打包目录时,要确保目录不存在,否则可能会出现打包失败的情况。同时,如果项目中有进行资源引用等操作,也需要根据修改后的打包路径进行相应的修改。
以上就是uniapp修改打包目录的详细内容。
