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中文網其他相關文章！