Vue CLI 打包译步骤详解·安装·推荐选择默认的Default预设

Vue CLI 打包编译步骤详解

一、安装 Vue CLI

首先，你需要在电脑上安装 Node.js 和 npm。你可以访问 Node.js 官网 下载最新的 LTS 版本，安装过程中 npm 会自动安装。

安装完成后，打开终端或命令提示符，输入以下命令来确保安装成功并查看版本：

node -v


npm -v

接下来，安装 Vue CLI，在终端输入以下命令：

npm install -g @vue/cli

安装完成后，你可以通过输入 vue --version 来检查 Vue CLI 的版本。

二、创建 Vue 项目

在终端中，导航到你想要创建项目的目录，然后输入以下命令来创建新项目：

vue create my-project

按照提示选择预设或手动选择配置项。推荐选择默认的“Default”预设。

创建完成后，进入项目目录并启动开发服务器：

cd my-project


npm run serve

在浏览器中访问 http://localhost:8080 查看项目运行情况。

三、配置打包选项

在项目根目录下找到 vue.config.js 文件，如果没有可以手动创建。然后根据需要在其中配置打包选项。

例如，你可以添加以下配置来设置生产环境的变量：

module.exports = {


  chainWebpack: config => {


    config.DefinePlugin({


      'process.env.VUE_APP_API_URL': JSON.stringify('https://api.example.com')


    })


  }


}

四、执行打包命令

在终端中输入以下命令进行项目打包：

npm run build

该命令将根据配置将项目编译并打包到 dist 目录中。

检查打包结果，打开 dist 目录，确认生成的文件包括 index.html、main.js、main.css 和资源文件。

五、优化打包结果

你可以通过以下方法来优化打包结果：

• 优化代码分割：在 vue.config.js 中添加配置，如

const path = require('path')





module.exports = {


  configureWebpack: {


    optimization: {


      splitChunks: {


        chunks: 'all',


      },


    },


  },


}

• 使用 Gzip 压缩：安装 gzip-webpack-plugin 插件，并在 vue.config.js 中配置 Gzip 压缩

const CompressionPlugin = require('compression-webpack-plugin')





module.exports = {


  plugins: [


    new CompressionPlugin({


      algorithm: 'gzip',


      test: /\.js$|\.css$/,


      threshold: 10240,


    }),


  ],


}

• 分析打包结果：安装 webpack-bundle-analyzer 插件，并在 vue.config.js 中配置打包结果分析

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin





module.exports = {


  plugins: [


    new BundleAnalyzerPlugin(),


  ],


}

执行打包命令后，打开生成的分析报告，查看打包结果并进行优化。

你可以顺利完成 Vue CLI 的打包编译。安装 Vue CLI，创建 Vue 项目，配置打包选项，执行打包命令，最后通过优化代码分割、使用 Gzip 压缩和分析打包结果等方法，进一步优化打包效果。合理的配置和优化可以使项目在生产环境中更高效地运行。