Vue 项目构建：自定义规则编译与打包的两种方法

2022-12-21 04:54:54

构建 Vue 项目：两种简单的方法

构建 Vue 项目对于前端新手来说可能是令人望而生畏的任务。在这篇文章中，我们将分享两种简单的方法，使用 vue-cli2 和 webpack 来创建你的 Vue 项目。第一种方法使用 vue-cli 自带的 webpack 默认直接打包，而第二种方法则让你可以自定义配置 webpack 来打包出你想要的结构。

方法 1：vue-cli 自带的 webpack 默认直接打包

这种方法非常简单，适合初学者。你无需了解 webpack，因为 vue-cli 会自动为你配置好一切。

步骤：

使用 vue-cli 创建新 Vue 项目：

vue create my-project

cd my-project

运行构建命令：

npm run build

项目将使用 vue-cli 自带的 webpack 配置进行构建。构建完成后，打包好的项目文件位于 dist 目录。

方法 2：自定义配置 webpack 打包

这种方法需要你对 webpack 有基本了解，但可以让你对构建过程有更多控制。

步骤：

在项目中安装 webpack：

npm install webpack --save-dev

创建 webpack 配置文件：

webpack.config.js

在配置文件中配置构建规则。例如，你可以指定要打包的文件、加载器和插件。

示例配置文件：

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
        ],
      },
    ],
  },
  plugins: [],
};