如何配置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中文网其他相关文章！