如何配置Vue CLI以使用不同的構建目標（開發，生產）？

如何配置Vue CLI以使用不同的構建目標（開發，生產）？

要配置VUE CLI以使用不同的構建目標進行開發和生產，您需要修改vue.config.js文件。該文件允許您指定可以根據構建目標應用的不同配置。這是您可以設置它的方法：

1. 創建或修改vue.config.js ：如果您在項目的根目錄中沒有vue.config.js文件，請創建一個。如果您已經有一個，請確保添加以下配置。
2. 定義特定環境的配置：使用process.env.NODE_ENV變量來區分開發環境和生產環境。這是您的vue.config.js文件的基本示例：

 <code class="javascript">module.exports = { // Configuration that applies to both environments publicPath: process.env.NODE_ENV === 'production' ? '/production-subdirectory/' : '/', // Other configurations... // ChainWebpack is used to modify the internal webpack configuration chainWebpack: config => { if (process.env.NODE_ENV === 'production') { // Production-specific webpack configurations config.optimization.minimize(true); // Other production-specific optimizations... } else { // Development-specific webpack configurations config.devtool('cheap-module-eval-source-map'); // Other development-specific settings... } } };</code>

在此示例中，根據環境設置了publicPath ，並使用chainWebpack方法將不同的Webpack設置應用於開發和生產。

3. 運行構建命令：要運行應用程序時，請使用以下命令：

   • 用於開發： <code>vue-cli-service serve</code>
   • 生產： <code>vue-cli-service build</code>

通過以這種方式設置vue.config.js文件，您可以輕鬆地在為開發和生產構建量身定制的不同配置之間切換。

如何在Vue CLI中的開發環境和生產環境之間切換？

VUE CLI中開發環境和生產環境之間的切換主要由您使用的命令和設置的環境變量處理。

1. 使用命令：

   • 要以開發模式啟動您的應用程序，請使用命令：

      <code>npm run serve</code>

     或者

     <code>vue-cli-service serve</code>

   • 要構建生產應用程序，請使用：

      <code>npm run build</code>

     或者

     <code>vue-cli-service build</code>

2. 設置環境變量：

   • VUE CLI使用process.env.NODE_ENV確定環境。當您運行<code>vue-cli-service serve</code> ， process.env.NODE_ENV會自動設置為'development' 。當您運行<code>vue-cli-service build</code> ，它將設置為'production' 。

   • 您還可以在運行命令之前手動設置NODE_ENV環境變量。例如：

      <code>NODE_ENV=production vue-cli-service build</code>

     這將確保構建過程使用生產設置。

通過使用這些命令並可能調整環境變量，您可以輕鬆地在VUE CLI中的開發環境和生產環境之間切換。

我應該在Vue CLI中調整哪些設置以優化生產構建？

為了優化Vue CLI中的生產構建，您應該專注於vue.config.js文件中的幾個關鍵設置。以下是一些重要的調整設置：

1. 縮小：

   • 確保您的代碼被縮小以減小文件大小。默認情況下，Vue CLI使用terser-webpack-plugin進行縮小。您可以在vue.config.js中進行配置：

      <code class="javascript">module.exports = { chainWebpack: config => { config.optimization.minimize(true); config.optimization.minimizer('terser').tap(args => { args[0].terserOptions.compress.drop_console = true; return args; }); } };</code>

     此示例還刪除了生產中的console語句，以進一步減少文件大小。

2. 代碼分裂：

   • 啟用代碼拆分只能為當前頁面加載必要的JavaScript。 Vue CLI會自動執行此操作，但是您可以通過調整splitChunks設置來進一步優化它：

      <code class="javascript">module.exports = { chainWebpack: config => { config.optimization.splitChunks({ chunks: 'all', minSize: 30000, maxSize: 0, minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, automaticNameDelimiter: '~', name: true, cacheGroups: { defaultVendors: { test: /[\\/]node_modules[\\/]/, priority: -10 }, default: { minChunks: 2, priority: -20, reuseExistingChunk: true } } }); } };</code>

3. 搖樹：

   • VUE CLI自動使樹搖動，從而消除未使用的代碼。確保您沒有進口不必要的模塊或在生產版中可以消除的組件。

4. GZIP壓縮：

   • 啟用GZIP壓縮以進行生產構建，以進一步減少傳輸文件的大小。這可以在您的服務器設置中進行配置，但也可以在vue.config.js ：

      <code class="javascript">const CompressionWebpackPlugin = require('compression-webpack-plugin'); module.exports = { configureWebpack: config => { if (process.env.NODE_ENV === 'production') { return { plugins: [new CompressionWebpackPlugin({ test: /\.js$|\.css$/, threshold: 10240, minRatio: 0.8 })] }; } } };</code>

5. 快取:

   • 在文件名中使用散列以利用瀏覽器緩存。 VUE CLI默認使用內容哈希，這有助於確保瀏覽器在內容更改時更新其緩存版本。

通過調整這些設置，您可以顯著優化VUE CLI生產的構建，從而產生更快的負載時間和更好的性能。

我如何確保我的開發在Vue CLI中構建，包括源地圖，以更輕鬆的調試？

為了確保在Vue CLI中構建的開發包括源地圖，以便於調試，您需要配置vue.config.js文件。默認情況下，在開發模式下啟用了源地圖，但是您可以將其明確設置為如下：

1. 修改vue.config.js ：確保您的項目根部有一個vue.config.js文件，並添加以下配置：

 <code class="javascript">module.exports = { chainWebpack: config => { if (process.env.NODE_ENV === 'development') { config.devtool('cheap-module-eval-source-map'); } } };</code>

cheap-module-eval-source-map選項在構建速度和開發功能之間提供了良好的平衡。它包括行對線映射，但不包括列映射，從而加快了構建過程。

2. 運行開發構建：當您使用以下方式運行開發構建時：

    <code>npm run serve</code>

   或者

   <code>vue-cli-service serve</code>

   Vue CLI將自動應用development配置，並包含vue.config.js文件中指定的源地圖。

通過使用此配置，您可以確保在開發過程中可用源地圖，從而更容易在瀏覽器的開發人員工具中調試應用程序。

以上是如何配置Vue CLI以使用不同的構建目標（開發，生產）？的詳細內容。更多資訊請關注PHP中文網其他相關文章！