vue2 打包教程：安装 webpack，创建一个配置文件，并配置 webpack。安装 vue loader 并将其添加到 webpack 配置中。运行打包脚本，打包应用程序。找到打包后的文件并将其部署到 web 服务器或托管平台。

Vue2 打包教程

如何将 Vue2 项目打包成可以部署的应用程序？

打包 Vue2 项目可以采用以下步骤：

1. 安装 Webpack

立即学习“前端免费学习笔记（深入）”；

Webpack 是一个模块打包工具，用于将 JavaScript、CSS 和其他资产打包成一个优化过的文件。安装 Webpack：

npm install --save-dev webpack webpack-cli

2. 创建配置文件

创建一个名为 webpack.config.js 的文件，该文件定义了 Webpack 的打包配置：

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
  },
};

• entry: 指定应用程序入口文件。
• output: 指定打包后的输出文件和目录。

3. 安装 Vue Loader

Vue Loader 是一个 Babel 预处理器，用于编译 Vue 单文件组件。安装 Vue Loader：

npm install --save-dev vue-loader

4. 更改配置文件

在 webpack.config.js 文件中添加 Vue Loader 配置：

module: {
  rules: [
    {
      test: /.vue$/,
      use: 'vue-loader',
    },
  ],
},

5. 运行打包脚本

在命令行中运行以下命令来启动打包过程：

npx webpack

6. 找到打包后的文件

打包后的应用程序将输出到 dist 目录中。通常情况下，它是一个名为 bundle.js 的文件。

7. 部署应用程序

将 dist 目录中的打包文件部署到 Web 服务器或其他托管平台。