vue cli什么命令打包

在Vue CLI中，使用“vue-cli-service build”命令来打包项目。

一、VUE CLI 打包命令

Vue CLI 是 Vue.js 官方提供的标准化工具，用于快速搭建 Vue 项目。要打包项目，只需在项目根目录下运行以下命令：

npm run build

或者直接运行：

vue-cli-service build

这将创建一个生产环境的构建版本，将所有文件打包并优化，以便部署到服务器。

二、VUE CLI 打包过程详解

Vue CLI 的打包过程涉及以下几个步骤：

读取配置文件：Vue CLI 会首先读取项目根目录下的 vue.config.js 文件中的配置。这些配置可以包括打包的输出目录、是否启用 Source Map、是否压缩代码等。
环境变量设置：Vue CLI 会根据当前环境（开发环境或生产环境）设置相应的环境变量，以便在打包过程中使用。这些变量可以在代码中通过 process.env 访问。
Webpack 配置生成：Vue CLI 使用 Webpack 作为打包工具。它会根据 vue.config.js 中的配置生成对应的 Webpack 配置，并加载各种插件和 loader。
文件处理：Webpack 会根据配置处理项目中的各种文件，包括 JavaScript、CSS、图片等。它会将这些文件转换成适合浏览器执行的格式，并应用各种优化手段，如代码拆分、懒加载等。
输出文件：最终，Webpack 会将处理后的文件输出到指定的目录（默认是 dist 目录）。这些文件可以直接部署到服务器上，以便用户访问。

三、VUE CLI 配置选项

在 vue.config.js 文件中，你可以通过配置项来自定义打包行为。以下是一些常用的配置选项：

module.exports = { // 基本路径 publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/', // 输出文件目录 outputDir: 'dist', // 静态资源目录 assetsDir: 'static', // 是否在保存时使用 `eslint-loader` 进行检查。 lintOnSave: process.env.NODE_ENV !== 'production', // 是否使用带有浏览器内编译器的完整构建版本 runtimeCompiler: false, // 生产环境是否生成 sourceMap 文件 productionSourceMap: false, // webpack 配置 configureWebpack: config => { // 配置示例 if (process.env.NODE_ENV === 'production') { // 为生产环境修改配置... config.mode = 'production'; } else { // 为开发环境修改配置... config.mode = 'development'; } }, // CSS 相关配置 css: { // 是否使用 CSS 分离插件 extract: true, // 是否为 CSS 开启 source map sourceMap: false, // css 预设器配置项 loaderOptions: {}, // 启用 CSS modules for all css / pre-processor files. requireModuleExtension: true }, // webpack-dev-server 相关配置 devServer: { // 配置示例 open: true, // 是否自动打开浏览器页面 host: '0.0.0.0', port: 8080, // 端口号 https: false, hotOnly: false, proxy: null // 设置代理 }, // PWA 插件相关配置 pwa: {}, // 第三方插件配置 pluginOptions: { // 配置示例 } }

这些配置项提供了高度的灵活性，允许开发者根据项目需求进行自定义调整。

四、VUE CLI 打包优化技巧

为了确保打包后的文件尽可能小且高效加载，可以采取以下几种优化技巧：

开启 Gzip 压缩：通过配置 Webpack 插件来开启 Gzip 压缩，以减小文件体积。
使用 CDN：将第三方库如 Vue、Vue Router 等通过 CDN 加载，以减少打包体积。
代码拆分：使用 Webpack 的代码拆分功能，将代码按需加载，减少初始加载时间。
Tree Shaking：确保使用 ES6 模块，以便 Webpack 能够进行 Tree Shaking，去除未使用的代码。
减少 Source Map：在生产环境中，禁用或减少 Source Map 的生成，以加快构建速度并减少文件体积。

五、实例说明

以下是一个简单的实例说明，展示如何进行上述优化：

// vue.config.js
const CompressionWebpackPlugin = require('compression-webpack-plugin');
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 开启 Gzip 压缩
      config.plugins.push(new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: /\.(js|css)$/,
        threshold: 10240,
        minRatio: 0.8
      }));
      // 使用 CDN
      config.externals = {
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'vuex': 'Vuex',
        'axios': 'axios'
      };
    }
  },
  chainWebpack: config => {
    // 代码拆分
    config.optimization.splitChunks({
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 20000,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
            return `npm.${packageName.replace('@', '')}`;
          }
        }
      }
    });
  },
  productionSourceMap: false
};

总结

通过使用 vue-cli-service build 命令，你可以方便地将 Vue 项目打包成生产环境可用的文件。为获得最佳性能和最小的文件体积，建议根据项目需求进行合理的配置和优化，如开启 Gzip 压缩、使用 CDN、代码拆分等。进一步优化和定制配置，可以显著提升项目的性能和用户体验。

相关问答FAQs：

1. Vue CLI是什么？如何使用它进行打包？

Vue CLI是Vue.js官方提供的一个基于命令行的工具，用于快速搭建和管理Vue.js项目。它集成了一系列的开发工具和配置，可以帮助开发者更高效地开发Vue.js应用程序。

要使用Vue CLI进行打包，首先需要通过npm安装Vue CLI。在命令行中运行以下命令：

npm install -g @vue/cli

安装完成后，可以使用以下命令创建一个新的Vue项目：

vue create my-project

这将提示你选择一个预设配置，你可以选择默认配置，也可以根据自己的需要选择自定义配置。创建完成后，进入项目目录：

cd my-project

然后运行以下命令进行打包：

npm run build

这将在项目的根目录下生成一个名为"dist"的文件夹，里面包含了打包后的静态文件。你可以将这些文件部署到服务器上，以供访问。

2. 打包后的文件放在哪里？如何配置打包输出路径？

打包后的文件默认会被放在项目根目录下的"dist"文件夹中。如果你想修改打包输出路径，可以修改项目根目录下的"vue.config.js"文件（如果没有则新建一个）。

在"vue.config.js"中，你可以使用"outputDir"选项来指定打包输出路径。例如，如果你希望将打包后的文件放在项目根目录下的"build"文件夹中，可以将"vue.config.js"配置如下：

module.exports = {
  outputDir: 'build'
}

保存文件后，再次运行打包命令：

npm run build

这次打包完成后，你会发现生成的文件被放在"build"文件夹中。

3. 如何配置打包的静态资源路径？

在Vue CLI的打包配置中，你可以使用"publicPath"选项来指定静态资源的路径。默认情况下，该选项的值为"/"，即将静态资源放在项目根目录下。

如果你想将静态资源放在一个子目录中，可以修改"vue.config.js"文件，将"publicPath"配置为你想要的路径。例如，如果你希望将静态资源放在一个名为"assets"的子目录中，可以将"vue.config.js"配置如下：

module.exports = {
  publicPath: '/assets/'
}