uniapp mengubah suai direktori pembungkusan

UniApp ialah rangka kerja bahagian hadapan merentas platform berdasarkan Vue.js, yang boleh mendayakan satu set kod berjalan pada berbilang terminal dengan mudah. Apabila menggunakan UniApp untuk pembangunan, projek itu akhirnya perlu dibungkus ke dalam kod yang diperlukan oleh terminal yang berbeza, seperti H5, program mini, aplikasi, dsb. Artikel ini akan memperkenalkan cara mengubah suai direktori pembungkusan UniApp.

Direktori pembungkusan lalai UniApp ialah "dist", yang akan menjana kod yang diperlukan oleh terminal yang berbeza Contohnya, kod H5 akan dijana ke dalam folder "h5" dalam direktori "dist". Jika anda perlu mengubah suai direktori pembungkusan UniApp, anda boleh mengikuti langkah di bawah.

1. Buka projek uni-app

Selepas membuka projek uni-app, kita perlu mencari "webpack.dev.conf.js" di bawah "build" folder dan "webpack.prod.conf.js" dua fail. Kedua-dua fail ini ialah fail konfigurasi yang diperlukan semasa membungkus UniApp.

2. Ubah suai webpack.dev.conf.js

Cari fail "webpack.dev.conf.js" dan cari kod berikut:

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

Antaranya, "config.build.assetsRoot" mewakili direktori akar tempat kod berpakej disimpan, dan lalai ialah direktori "dist". Kami boleh mengubah suainya kepada nama direktori yang kami mahu, contohnya, menyimpan kod yang dibungkus dalam direktori "bina":

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

Pada ketika ini, kami telah menyelesaikan pengubahsuaian "webpack.dev.conf.js "pengubahsuaian.

3. Ubah suai webpack.prod.conf.js

Cari fail "webpack.prod.conf.js" dan cari kod berikut:

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

Begitu juga, kita boleh mengubah suai "config.build.assetsRoot" kepada nama direktori yang kita mahu.

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

4. Ubah suai vue.config.js

Selepas melengkapkan dua langkah di atas, kami juga perlu mengubah suai laluan pembungkusan dalam fail "vue.config.js" , menjadikannya konsisten dengan fail konfigurasi "webpack.dev.conf.js" dan "webpack.prod.conf.js" yang diubah suai.

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

Dalam "outputDir", kami mengubah suainya kepada nama direktori yang kami mahu, seperti "bina".

5. Membungkus projek

Selepas melengkapkan langkah di atas, kami boleh membungkus semula keseluruhan projek UniApp Pada masa ini, kod yang kami bungkus akan disimpan dalam direktori kami tengah.

Ringkasan

Melalui langkah di atas, kami boleh mengubah suai direktori pembungkusan UniApp dengan mudah. Perlu diingat bahawa apabila mengubah suai direktori pembungkusan, pastikan direktori itu tidak wujud, jika tidak pembungkusan mungkin gagal. Pada masa yang sama, jika terdapat rujukan sumber dan operasi lain dalam projek, pengubahsuaian yang sepadan perlu dibuat berdasarkan laluan pembungkusan yang diubah suai.

Atas ialah kandungan terperinci uniapp mengubah suai direktori pembungkusan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!