利用vite创建vue3项目的全过程及一个小BUG详解

下面我将详细讲解如何利用 Vite 创建 Vue 3 项目的全过程，并对遇到的一个小 BUG 进行详解。

1. 安装 Vite

首先，我们需要全局安装 Vite：

npm install -g vite

2. 创建项目

创建一个基于 Vue 3 的项目可以使用 Vue CLI 4.x 或者使用 Vite + Vue 3。这里我们使用 Vite + Vue 3 的组合来创建我们的 Vue 3 项目。

进入项目所在的路径，使用以下命令快速创建一个 Vue 3 项目：

npm init vite@latest my-vue3-project --template vue

上面的命令中：

my-vue3-project：项目名，你可以根据自己的需要来修改；
--template vue：使用 Vue 模板来创建项目。

在创建过程中我们可以根据自己的需要来进行选择，这里我选择了默认的配置。

创建完成后，进入项目：

cd my-vue3-project

3. 启动项目

进入项目后，我们可以使用以下命令来启动项目：

npm run dev

这个命令将会启动一个开发服务器，当你修改了代码后，它能够在你保存代码后自动刷新页面。

4. 项目结构

通过以上步骤创建的项目结构应该是这样的：

my-vue3-project/
├─node_modules/
├─public/
│  ├─favicon.ico
│  └─index.html
├─src/
│  ├─App.vue
│  ├─main.js
│  └─index.css
├─.gitignore
├─package.json
├─README.md
└─vite.config.js

node_modules/：包含所有使用到的 npm 模块；
public/：存放静态文件和 HTML 入口文件；
src/：存放源代码；
App.vue：Vue 3 的根组件，由 main.js 引入；
main.js：Vue 3 的入口文件，创建了 Vue 3 实例并将 App.vue 挂载到 DOM 上；
index.css：样式文件；
.gitignore：Git 忽略列表；
package.json：npm 包管理文件；
README.md：项目说明文件；
vite.config.js：Vite 的配置文件。

5. BUG 详解

在使用 Vite 创建 Vue 3 项目时，如果你在项目根目录下创建了一个名为 .env 的文件，并在该文件中设置了一些环境变量，那么这些环境变量将无法在项目中被正确获取到。

这是因为 Vite 在默认情况下不支持 .env 文件，如果我们需要使用 .env 文件中的环境变量，需要进行以下配置：

在项目根目录下创建名为 .env 的文件；
在该文件中定义环境变量，比如我们定义一个名为 VITE_APP_TITLE 的环境变量：VITE_APP_TITLE=My Vue 3 App；
在 Vite 的配置文件 vite.config.js 中添加以下配置：

export default {
  define: {
    'process.env': {
      VITE_APP_TITLE: process.env.VITE_APP_TITLE
    }
  }
}

上面代码中，我们使用了 Vite 的配置选项 define，将 .env 文件中定义的变量映射到了 process.env 对象上。

接下来，我们就可以在项目代码中通过 process.env.VITE_APP_TITLE 来获取 .env 文件中定义的环境变量了。

示例说明

示例一 - 修改标题

我们可以在 .env 文件中添加一个 VITE_APP_TITLE 变量，然后在 public/index.html 中使用该变量来定义页面的标题：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>%REPLACE_ME%</title>
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

在修改后的 public/index.html 中，我们使用了 %REPLACE_ME% 来代替原来固定的标题，然后在 main.js 中通过 process.env.VITE_APP_TITLE 来获取 .env 文件中定义的变量，然后再将该变量设置为页面的标题：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

document.title = process.env.VITE_APP_TITLE

示例二 - 使用 API

我们可以在 .env 文件中添加一个 VITE_API_URL 变量，然后在项目中使用该变量来获取 API 的地址。

首先，在 .env 文件中定义一个 VITE_API_URL 变量：

VITE_API_URL=https://my-api.com

然后在 src/api.js 文件中定义一个函数来获取 API 的地址：

export const getApiUrl = () => {
  return process.env.VITE_API_URL
}

在项目中，我们可以使用 getApiUrl 函数来获取 API 的地址：

import { getApiUrl } from './api'

console.log(getApiUrl()) // 输出 https://my-api.com

好了，以上就是利用 Vite 创建 Vue 3 项目的全过程及一个小 BUG 的详细攻略，希望对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：利用vite创建vue3项目的全过程及一个小BUG详解 - Python技术站