下面我将详细讲解如何利用 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技术站
微信扫一扫 
支付宝扫一扫 