How do I configure Vue CLI to use different build targets (development, production)?

How do I configure Vue CLI to use different build targets (development, production)?

To configure Vue CLI to use different build targets for development and production, you need to modify your vue.config.js file. This file allows you to specify different configurations that can be applied depending on the build target. Here's how you can set it up:

1. Create or modify vue.config.js: If you don't have a vue.config.js file in the root directory of your project, create one. If you already have one, make sure to add the following configurations.
2. Define environment-specific configurations: Use the process.env.NODE_ENV variable to differentiate between development and production environments. Here is a basic example of what your vue.config.js file might look like:

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...
    }
  }
};

In this example, publicPath is set differently based on the environment, and the chainWebpack method is used to apply different webpack settings for development and production.

3. Running the build commands: When you want to run your application, use the following commands:

   • For development: <code>vue-cli-service serve</code>
   • For production: <code>vue-cli-service build</code>

By setting up your vue.config.js file in this way, you can easily switch between different configurations tailored for development and production builds.

How can I switch between development and production environments in Vue CLI?

Switching between development and production environments in Vue CLI is primarily handled by the commands you use and the environment variables that are set.

1. Using Commands:

   • To start your application in development mode, use the command:

     <code>npm run serve</code>

     or

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

   • To build your application for production, use:

     <code>npm run build</code>

     or

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

2. Setting Environment Variables:

   • Vue CLI uses process.env.NODE_ENV to determine the environment. When you run <code>vue-cli-service serve</code>, process.env.NODE_ENV is automatically set to 'development'. When you run <code>vue-cli-service build</code>, it is set to 'production'.

   • You can also manually set the NODE_ENV environment variable before running the commands. For example:

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

     This will ensure the build process uses the production settings.

By using these commands and possibly adjusting environment variables, you can easily switch between development and production environments in Vue CLI.

What settings should I adjust in Vue CLI for optimizing production builds?

To optimize production builds in Vue CLI, you should focus on several key settings within your vue.config.js file. Here are some important settings to adjust:

1. Minification:

   • Ensure that your code is minified to reduce the file size. By default, Vue CLI uses terser-webpack-plugin for minification. You can configure it in vue.config.js:

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

     This example also drops console statements in production to further reduce the file size.

2. Code Splitting:

   • Enable code splitting to load only the necessary JavaScript for the current page. Vue CLI does this automatically, but you can further optimize it by adjusting the splitChunks settings:

     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
             }
           }
         });
       }
     };

3. Tree Shaking:

   • Vue CLI automatically enables tree shaking, which removes unused code. Ensure that you are not importing unnecessary modules or components that could be eliminated in production builds.

4. GZIP Compression:

   • Enable GZIP compression for production builds to further reduce the size of transferred files. This can be configured in your server settings but can also be set up in vue.config.js:

     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
             })]
           };
         }
       }
     };

5. Caching:

   • Use hashing in filenames to take advantage of browser caching. Vue CLI uses content hashing by default, which helps ensure that browsers update their cached versions when content changes.

By adjusting these settings, you can significantly optimize your Vue CLI production builds, resulting in faster load times and better performance.

How do I ensure that my development builds in Vue CLI include source maps for easier debugging?

To ensure that your development builds in Vue CLI include source maps for easier debugging, you need to configure your vue.config.js file. Source maps are enabled by default in development mode, but you can explicitly set them up as follows:

1. Modify vue.config.js: Ensure that you have a vue.config.js file in the root of your project, and add the following configuration:

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

The cheap-module-eval-source-map option provides a good balance between build speed and debugging capabilities for development. It includes line-to-line mappings but does not include column mappings, which speeds up the build process.

2. Running the Development Build: When you run the development build using:

   <code>npm run serve</code>

   or

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

   Vue CLI will automatically apply the development configuration and include source maps as specified in your vue.config.js file.

   By using this configuration, you ensure that source maps are available during development, making it easier to debug your application in the browser's developer tools.

   The above is the detailed content of How do I configure Vue CLI to use different build targets (development, production)?. For more information, please follow other related articles on the PHP Chinese website!