构建工具
构建工具

在 Vue 项目中配置 Webpack

使用 Vue CLI 可以轻松创建和配置 Vue 项目，其中 Webpack 配置也是通过 Vue CLI 来管理的。

# 1. 安装和配置 nvm

# 1.1 安装 nvm (GitHub地址 (opens new window))

nvm 即 (node version manager)，好处是方便切换 node.js 版本

# 1.2 安装注意事项

要卸载掉现有的 node.js。
提示选择 nvm 和 node.js 目录时，一定要避免目录中出现空格。
选用【以管理员身份运行】cmd 程序来执行 nvm 命令。
首次运行前设置好国内镜像地址：

nvm node_mirror: https://npmmirror.com/mirrors/node/
nvm npm_mirror: https://npmmirror.com/mirrors/npm/

1
2

# 1.3 查看和安装 Node.js 版本

查看可用版本：

nvm list available

输出：

|   CURRENT    |     LTS      |  OLD STABLE  | OLD UNSTABLE |
|--------------|--------------|--------------|--------------|
|    18.7.0    |   16.16.0    |   0.12.18    |   0.11.16    |
|    18.6.0    |   16.15.1    |   0.12.17    |   0.11.15    |
...

1
2
3
4
5

nvm list available出现空白解决办法（传送门 (opens new window)）

建议安装 LTS（长期支持版）：

nvm install 16.16.0
nvm install 14.20.0

1
2

列出已安装版本：

nvm list

切换到 16.16.0：

nvm use 16.16.0

切换到 14.20.0：

nvm use 14.20.0

# 1.4 配置环境变量

完成 NVM 和 Node.js 安装后，需要配置或检查系统环境变量，以确保 NVM 和 Node.js 的正常工作。

步骤 1：检查 NVM 的环境变量

安装 NVM 后，安装程序通常会自动将 NVM 的路径添加到环境变量中。你可以按以下步骤检查是否已正确配置：

按下 Win + S，搜索 环境变量，选择 编辑系统环境变量。
在弹出的窗口中，点击 环境变量 按钮。
在系统变量区域，找到并检查 Path 变量，确认以下路径是否已添加：
- NVM 的路径（通常是 NVM 的安装目录）：
```
C:\Program Files\nvm
```
  1
- NVM 管理的 Node.js 的路径：
```
C:\Program Files\nodejs
```
  1
  （注意：此路径通常是由 NVM 动态创建的符号链接。）

步骤 2：手动添加 Node.js 的 PATH（如果未自动添加）

如果安装后 Path 变量中缺少 C:\Program Files\nodejs，需要手动添加：

打开 环境变量 窗口，找到 系统变量 下的 Path，点击编辑。
在弹出的窗口中，点击新建，添加以下路径：
确认并保存设置。

# 2. 检查和配置 npm

# 2.1 检查 npm 镜像

npm 是 JavaScript 的包管理器，类似于 Java 的 Maven。要确保它使用的是国内镜像：

检查镜像：

npm get registry

如果返回的不是 https://registry.npmmirror.com，需要做如下设置：

npm config set registry https://registry.npmmirror.com

npmmirror 镜像站官网 (opens new window)

# 2.2 配置 npm 下载依赖位置

# Windows
# 设置 npm 缓存目录，npm 下载依赖包时会先存储在这个位置，以提高后续的安装速度。
npm config set cache "D:\nodereps\npm-cache"
# 设置 npm 全局安装包目录，npm 安装的全局依赖会存储在这个目录下。
npm config set prefix "D:\nodereps\npm_global"


# macOS
# 设置 npm 缓存目录，npm 下载依赖包时会先存储在这个位置，以提高后续的安装速度。
npm config set cache "/Users/chenyannan/dev/nodereps"
# 设置 npm 全局安装包目录，npm 安装的全局依赖会存储在这个目录下。
npm config set prefix "/Users/chenyannan/dev/nodereps"

1
2
3
4
5
6
7
8
9
10
11
12

# 2.3 配置全局安装目录的环境变量

打开系统环境变量设置：
1. 按下 Win + S，搜索 环境变量，选择 编辑系统环境变量。
2. 在弹出的窗口中，点击 环境变量 按钮。
在 系统变量 下，找到 Path，点击编辑。
点击新建，添加以下路径：D:\nodereps\npm_global
确认保存，重新启动终端，确保环境变量生效（如果发现cmd环境变量没生效，重启电脑即可）。

如果不想重启电脑刷新环境变量，可以使用 refreshenv 命令

1. 安装 Chocolatey 包管理器（如果未安装）

打开 PowerShell (管理员权限)。

安装 Chocolatey：

Set-ExecutionPolicy Bypass -Scope Process -Force; `
[System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; `
iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

1
2
3

2. 使用 refreshenv 命令刷新环境变量

安装完成后，运行以下命令：
```
refreshenv
```
1
该命令会刷新当前终端的环境变量，无需关闭或重启终端。

为什么要配置全局安装目录的环境变量？

全局工具的可执行文件路径：
- 当你通过 npm 全局安装工具（例如 yarn, vue, pnpm）时，这些工具的可执行文件会存储在 prefix 配置路径的根目录（如 D:\nodereps\npm_global 或 /Users/chenyannan/dev/nodereps）。
- 如果这个路径没有添加到系统的环境变量 PATH 中，终端就无法识别这些工具命令，从而导致执行命令时出现 “命令找不到” 的错误。
环境变量的作用：
- 环境变量 PATH 告诉操作系统到哪里去查找可执行文件。如果全局安装目录不在 PATH 中，操作系统就无法定位这些工具的可执行文件。
常见问题：
- 如果没有配置全局安装目录的环境变量，即使工具安装成功，在终端中运行 yarn, vue, pnpm等命令时会出现以下错误：
```
'yarn' 不是内部或外部命令，也不是可运行的程序或批处理文件。
```
  1
- 配置环境变量后，终端才能正确找到这些工具的可执行文件。

# 2.4 验证 Node.js 环境配置

查看环境配置：

npm config ls

输出示例：

; userconfig /Users/chenyannan/.npmrc
cache = "/Users/chenyannan/dev/nodereps"
prefix = "/Users/chenyannan/dev/nodereps"
registry = "https://registry.npm.taobao.org/"

1
2
3
4

# 3. 安装和使用 Vue CLI

# 3.1 安装 Vue CLI

Vue CLI 中文官网：https://cli.vuejs.org/zh/

安装 Vue CLI：

npm install -g @vue/cli

# 3.2 使用命令创建 Vue 项目

安装完成后，可以使用 vue-cli 快速生成一个工程化的 Vue 项目。

# 创建一个新的 Vue 项目
vue create my-project

1
2

在执行命令后，会提示选择预设配置，可以选择默认配置或手动选择配置项。

# 3.3 使用图形化界面创建 Vue 项目

使用 Vue CLI 创建一个新的 Vue 项目：

vue ui

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

使用图形向导来创建 Vue 项目，如下图，输入项目名：

选择手动配置项目：

添加 Vue Router 和 Vuex：

选择版本，创建项目（这里使用的 Vue 2 版本）：

# 3.4 进入项目目录

cd my-vue-project

# 4. 安装 devtools

devtools 插件网址：https://devtools.vuejs.org/guide/installation.html (opens new window)
安装完成后，按 F12 进入开发者工具导航栏会显示 Vue，用来调试 Vue 项目：

# 5. 运行项目

进入项目目录，执行以下命令启动项目：

npm run serve

# 6. 自定义 Webpack 配置

Vue CLI 通过 vue.config.js 文件来配置项目。你可以在项目根目录下创建一个 vue.config.js 文件，并在其中添加自定义的 Webpack 配置。

# 6.1 创建 `vue.config.js` 文件

在项目根目录下创建一个 vue.config.js 文件：

touch vue.config.js

# 6.2 配置 Webpack

在 vue.config.js 文件中，你可以通过 configureWebpack 或 chainWebpack 选项来修改 Webpack 配置。

# 6.2.1 使用 `configureWebpack` 选项

configureWebpack 选项允许你直接修改 Webpack 配置对象或配置函数。

// 引入 Node.js 的 path 模块，用于处理文件路径
const path = require('path');

module.exports = {
  // 使用 configureWebpack 直接修改 Webpack 配置
  configureWebpack: {
    // 配置解析选项，设置别名
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),  // 将 '@' 别名指向 'src' 目录
        'assets': path.resolve(__dirname, 'src/assets'),  // 将 'assets' 别名指向 'src/assets' 目录
      },
    },
    // 配置插件
    plugins: [
      new MyAwesomeWebpackPlugin(),  // 使用自定义的 Webpack 插件
    ],
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 6.2.2 使用 `chainWebpack` 选项

chainWebpack 选项允许你使用 webpack-chain (opens new window) 提供的 API 来修改 Webpack 配置。这种方式更为灵活和强大。

// 引入 Node.js 的 path 模块，用于处理文件路径
const path = require('path');

module.exports = {
  // 使用 chainWebpack 修改 Webpack 配置
  chainWebpack: config => {
    // 设置别名
    config.resolve.alias
      .set('@', path.resolve(__dirname, 'src'))  // 将 '@' 别名指向 'src' 目录
      .set('assets', path.resolve(__dirname, 'src/assets'));  // 将 'assets' 别名指向 'src/assets' 目录

    // 配置插件
    config.plugin('MyAwesomeWebpackPlugin')
      .use(require('my-awesome-webpack-plugin'), [{ /* 插件选项 */ }]);  // 使用自定义的 Webpack 插件

    // 修改默认配置
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
        // 修改图片加载器的选项
        options.limit = 10000;  // 设置图片大小限制，超过此大小的图片将不进行内联
        return options;
      });
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 7. 示例配置

以下是一些常见的 Webpack 配置示例：

# 7.1 配置 CSS 预处理器

如果你想在 Vue 项目中使用 Sass 或其他 CSS 预处理器，可以在 vue.config.js 中进行如下配置：

module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // 这里配置全局引入的 SCSS 文件，例如变量、混入等
        additionalData: `@import "~@/styles/variables.scss";`
      },
      // 给 less-loader 传递选项
      less: {
        lessOptions: {
          modifyVars: {
            // 配置全局变量
            'primary-color': '#42b983',
          },
          javascriptEnabled: true,
        },
      },
    },
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 7.2 配置开发服务器

你可以通过 vue.config.js 配置开发服务器的行为，例如代理请求等：

module.exports = {
  devServer: {
    proxy: {
      '/api1': {
        // 匹配所有以 '/api1' 开头的请求路径
        target: 'http://localhost:5000', // 代理目标的基础路径
        ws: true, // 用于支持 websocket
        changeOrigin: true, // 控制请求头中的 host 值
        pathRewrite: {'^/api1': ''} // 重写路径【必须写】，利用正则替换请求前缀
      },
      '/api2': {
        // 匹配所有以 '/api2' 开头的请求路径
        target: 'http://localhost:5001', // 代理目标的基础路径
        changeOrigin: true, // 控制请求头中的 host 值
        pathRewrite: {'^/api2': ''} // 重写路径，利用正则替换请求前缀
      }
    }
  }
};

/*
  changeOrigin 设置为 true 时，服务器收到的请求头中的 host 为：localhost:5000
  changeOrigin 设置为 false 时，服务器收到的请求头中的 host 为：localhost:8080
  changeOrigin 默认值为 true（React 默认为 false）
*/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 7.3 配置环境变量

你可以在项目根目录下创建 .env 文件来配置环境变量：

# .env
VUE_APP_API_URL=http://localhost:3000

1
2

在代码中使用环境变量：

// 打印环境变量 VUE_APP_API_URL
console.log(process.env.VUE_APP_API_URL);

1
2

编辑此页

上次更新: 2025/01/05, 02:09:04

← Webpack 打包发布在 Vue 项目中配置 Vite→