程序员scholar
  • 构建工具
  • 构建工具
scholar
2024-07-29
目录

在 Vue 项目中配置 Vite

  • Vite (opens new window) 是一个现代前端构建工具，与 Webpack 不同，Vite 在开发时不对代码进行打包，而是直接采用 ESM（ES模块） 方式运行项目。在项目部署时，再对代码进行打包。
  • Vite 提供了更快的开发服务器启动速度和更简单的配置，开箱即用，极大地提高了开发体验。
  • 虽然 Vite 和 Webpack 都是打包工具，但 Webpack 比较底层，需要更多的手动配置。

# 1. 使用 Vite 创建 Vue 项目

# 1.1 安装 Vite

首先，确保你已经安装了 Vite。如果尚未安装，可以使用以下命令进行安装：

npm install -g create-vite
1

# 1.2 创建 Vue 项目

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

npm create vite@latest
1

在命令行提示中选择 Vue 作为框架：

✔ Project name: … my-vite-vue-project
✔ Select a framework: › vue
✔ Select a variant: › vue
1
2
3

# 1.3 进入项目目录并安装依赖

进入项目目录：

cd my-vite-vue-project
1

安装项目依赖：

npm install
1

# 2. 配置 Vite

在项目根目录下，你会找到一个 vite.config.js 文件，这是 Vite 的配置文件。你可以在其中进行自定义配置。

# 2.1 基本配置

这是一个基本的 Vite 配置文件示例：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src', // 设置别名，将 '@' 指向 '/src' 目录
    },
  },
  server: {
    port: 3000, // 设置开发服务器的端口号为 3000
    open: true, // 在服务器启动后自动打开浏览器
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在这个配置中：

  • plugins：使用 @vitejs/plugin-vue 插件来处理 Vue 文件。
  • resolve.alias：设置路径别名，这样可以使用 @ 来表示 src 目录。
  • server：配置开发服务器，设置端口为 3000，并在服务器启动后自动打开浏览器。

# 2.2 配置开发服务器

你可以在 vite.config.js 文件中配置开发服务器的代理和其他选项：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src', // 设置别名，将 '@' 指向 '/src' 目录
    },
  },
  server: {
    port: 3000, // 设置开发服务器的端口号为 3000
    open: true, // 在服务器启动后自动打开浏览器
    proxy: {
      '/api1': {
        target: 'http://localhost:5000', // 代理目标的基础路径
        changeOrigin: true, // 控制请求头中的 host 值
        rewrite: path => path.replace(/^\/api1/, ''), // 重写路径【必须写】，利用正则替换请求前缀
        ws: true, // 用于支持 websocket
      },
      '/api2': {
        target: 'http://localhost:5001', // 代理目标的基础路径
        changeOrigin: true, // 控制请求头中的 host 值
        rewrite: path => path.replace(/^\/api2/, ''), // 重写路径，利用正则替换请求前缀
      }
    }
  }
})
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
28
29
30

在这个配置中：

  • proxy：配置代理，将以 /api1 和 /api2 开头的请求分别代理到不同的服务器。
    • target：代理目标的基础路径。
    • changeOrigin：控制请求头中的 host 值。
    • rewrite：重写路径，利用正则替换请求前缀。
    • ws：用于支持 WebSocket。

# 2.3 配置环境变量

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

# .env
VITE_API_URL=http://localhost:3000
1
2

在代码中使用环境变量：

// 使用环境变量
console.log(import.meta.env.VITE_API_URL);
1
2

在这个配置中：

  • VITE_API_URL：定义一个 API URL 环境变量，可以在代码中通过 import.meta.env.VITE_API_URL 访问。

# 2.4 使用插件

Vite 支持多种插件，你可以在 vite.config.js 文件中配置插件。例如，使用 @vitejs/plugin-legacy 插件来支持旧版浏览器：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    legacy({
      targets: ['defaults', 'not IE 11'] // 配置需要兼容的浏览器版本
    })
  ],
  resolve: {
    alias: {
      '@': '/src', // 设置别名，将 '@' 指向 '/src' 目录
    },
  },
  server: {
    port: 3000, // 设置开发服务器的端口号为 3000
    open: true, // 在服务器启动后自动打开浏览器
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在这个配置中：

  • @vitejs/plugin-legacy：用于支持旧版浏览器，配置需要兼容的浏览器版本。

# 2.5 配置 CSS 预处理器

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

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src', // 设置别名，将 '@' 指向 '/src' 目录
    },
  },
  css: {
    preprocessorOptions: {
      sass: {
        additionalData: `@import "@/styles/variables.scss";` // 全局引入 SCSS 变量文件
      },
      less: {
        modifyVars: {
          'primary-color': '#42b983', // 修改全局变量
        },
        javascriptEnabled: true,
      },
    },
  },
  server: {
    port: 3000, // 设置开发服务器的端口号为 3000
    open: true, // 在服务器启动后自动打开浏览器
  }
})
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
28
29
30

在这个配置中：

  • preprocessorOptions：配置 CSS 预处理器选项。
    • sass：配置全局引入的 SCSS 文件，例如变量、混入等。
    • less：配置全局变量和其他 Less 选项。

# 3. 示例配置

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

# 3.1 配置 Vue Router 和 Vuex

你可以在项目中使用 Vue Router 和 Vuex，并在 vite.config.js 中配置相关内容：

npm install vue-router@next vuex@next
1

# 3.2 配置开发服务器的多个代理

在某些情况下，你可能需要配置多个代理。例如，将不同的 API 请求代理到不同的服务器：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src', // 设置别名，将 '@' 指向 '/src' 目录
    },
  },
  server: {
    port: 3000, // 设置开发服务器的端口号为 3000
    open: true, // 在服务器启动后自动打开浏览器
    proxy: {
      '/api1': {
        target: 'http://localhost:5000', // 代理目标的基础路径
        changeOrigin: true, // 控制请求头中的 host 值
        rewrite: path => path.replace(/^\/api1/, ''), // 重写路径【必须写】，利用正则替换请求前缀
        ws: true, // 用于支持 websocket
      },
      '/api2': {
        target: 'http://localhost:5001', // 代理目标的基础路径
        changeOrigin: true, // 控制请求头中的 host 值
        rewrite: path => path.replace(/^\/api2/, ''), // 重写路径，利用正则替换请求前缀
      }
    }
  }
})
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
28
29
30

在这个配置中：

  • 配置了多个代理，将 /api1 和 /api2 开头的请求分别代理到不同的服务器。

# 3.3 配置环境变量

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

# .env
VITE_API_URL=http://localhost:3000
1
2

在代码中使用环境变量：

// 使用环境变量
console.log(import.meta.env.VITE_API_URL);
1
2

在这个配置中：

  • VITE_API_URL：定义一个 API URL 环境变量，可以在代码中通过 import.meta.env.VITE_API_URL 访问。
编辑此页 (opens new window)
上次更新: 2025/01/05, 02:09:04
在 Vue 项目中配置 Webpack

←

Theme by Vdoing | Copyright © 2019-2025 程序员scholar