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 压缩和分析打包结果等方法，进一步优化打包效果。合理的配置和优化可以使项目在生产环境中更高效地运行。