Vite項目搭建與環(huán)境配置的完整版教程
1. 打包構(gòu)建
Vite 使用 Rollup 作為默認的構(gòu)建工具。通過運行 npm run build 命令，Vite 會將應用程序的源代碼打包成一個或多個優(yōu)化的靜態(tài)文件，以便在生產(chǎn)環(huán)境中進行部署。Vite 的構(gòu)建過程會根據(jù)需要進行代碼拆分、壓縮和優(yōu)化，以提供最佳的性能和文件大小。
# package.json
{
"scripts": {
"build": "vite build"
}
}2. 環(huán)境變量
Vite 支持在項目中使用環(huán)境變量。您可以在項目的根目錄下創(chuàng)建一個 .env 文件，并在其中定義您需要的環(huán)境變量。然后，在您的代碼中，可以使用 import.meta.env 對象來訪問這些環(huán)境變量。Vite 會根據(jù)當前的環(huán)境自動加載相應的環(huán)境變量文件，例如 .env.development、.env.production 等。
# .env VITE_API_URL=https://api.example.com VITE_APP_NAME=My App ???????# main.js console.log(import.meta.env.VITE_API_URL); // 輸出：https://api.example.com console.log(import.meta.env.VITE_APP_NAME); // 輸出：My App
3. 模式
Vite 支持兩種模式：開發(fā)模式和生產(chǎn)模式。在開發(fā)模式下，Vite 會提供一個開發(fā)服務器，實現(xiàn)快速的冷啟動和熱重載，以便在開發(fā)過程中獲得即時的反饋。在生產(chǎn)模式下，Vite 會對應用程序進行優(yōu)化和打包，以提供更高的性能和更小的文件大小。
# package.json
{
"scripts": {
"dev": "vite",
"build": "vite build"
}
}4. 兼容老瀏覽器
Vite 默認情況下不支持老版本的瀏覽器，因為它使用了一些現(xiàn)代的 JavaScript 特性和瀏覽器原生模塊的功能。但是，您可以通過配置文件來啟用對老瀏覽器的支持。通過設置 target 選項為 es2015，并使用 @vitejs/plugin-legacy 插件，您可以將您的應用程序轉(zhuǎn)換為兼容老瀏覽器的代碼。
# vite.config.js
import { defineConfig } from 'vite';
import legacy from '@vitejs/plugin-legacy';
export default defineConfig({
plugins: [
legacy({
targets: ['ie >= 11'],
additionalLegacyPolyfills: ['regenerator-runtime/runtime']
})
]
});5. TypeScript 相關(guān)
Vite 對 TypeScript 提供了原生的支持。您可以在項目中使用 TypeScript 來編寫代碼，并且 Vite 會自動識別和編譯 TypeScript 文件。在使用 TypeScript 的同時，您可以享受到 Vite 帶來的快速的冷啟動和熱重載的特性。
# main.ts
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.mount('#app');6. 基本配置
Vite 的基本配置可以通過一個名為 vite.config.js 的配置文件進行設置。在這個配置文件中，您可以自定義各種選項，例如入口文件、輸出路徑、插件配置等。您還可以根據(jù)需要使用不同的插件來擴展 Vite 的功能。
# vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
root: './src',
base: '/my-app/',
plugins: [],
build: {
outDir: '../dist',
assetsDir: 'assets',
sourcemap: true
}
});7.核心配置全集
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import legacy from '@vitejs/plugin-legacy';
import { resolve } from 'path';
export default defineConfig({
root: resolve(__dirname, './src'),
base: '/my-app/',
build: {
outDir: resolve(__dirname, './dist'),
assetsDir: 'assets',
sourcemap: true,
rollupOptions: {
external: ['axios'],
output: {
globals: {
axios: 'axios'
}
}
}
},
plugins: [
vue(),
legacy({
targets: ['ie >= 11'],
additionalLegacyPolyfills: ['regenerator-runtime/runtime']
})
],
server: {
port: 3000,
proxy: {
'/api': {
target: 'https://api.example.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
});- root：指定項目的根目錄路徑。
- base：指定項目的基礎路徑，用于指定靜態(tài)資源的引用路徑。
- build：用于配置構(gòu)建相關(guān)的選項，包括輸出目錄、靜態(tài)資源目錄、是否生成源映射等。
- plugins：用于配置 Vite 插件，例如 @vitejs/plugin-vue 和 @vitejs/plugin-legacy。
- server：用于配置開發(fā)服務器的選項，包括端口號、代理等。
此外，示例代碼中還展示了一些其他的配置選項的使用：
- rollupOptions：用于配置 Rollup 的選項，例如外部依賴和全局變量。
- proxy：用于配置開發(fā)服務器的代理選項，用于將請求代理到其他服務器。
8.整體代碼示例
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
},
server: {
port: 3000
}
});這是一個基本的 Vite 配置文件，包括了以下配置選項：
- plugins：使用 @vitejs/plugin-vue 插件來支持 Vue 單文件組件。
- resolve.alias：設置別名，將 @ 指向項目的 src 目錄，方便在代碼中使用絕對路徑引入模塊。
- server.port：設置開發(fā)服務器的端口號為 3000。
接下來，我們可以在 src 目錄下創(chuàng)建一個簡單的 Vue 應用：
<!-- App.vue -->
<template>
<div>
<h1>Hello Vite!</h1>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Welcome to Vite!'
};
}
};
</script>
<style>
h1 {
color: blue;
}
</style>// main.js
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');在項目根目錄下運行 npm install 安裝依賴，然后使用 npm run dev 啟動開發(fā)服務器。在瀏覽器中打開 http://localhost:3000，您將看到一個簡單的 Vue 應用，顯示 “Hello Vite!” 和 “Welcome to Vite!”。
以上就是Vite項目搭建與環(huán)境配置的完整版教程的詳細內(nèi)容，更多關(guān)于Vite教程的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue.js每天必學之內(nèi)部響應式原理探究，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了vue-router實現(xiàn)原理及兩種模式分析,給大家介紹了vue-router hash模式與history模式不同模式下處理邏輯，需要的朋友可以參考下2020-02-02
近期做的項目比較雜,涉及到前端框架的工作,遇到了許多問題,記錄一下這個比較棘手的問題,下面這篇文章主要給大家介紹了關(guān)于vue3中cookie的詳細使用方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue+flask實現(xiàn)視頻合成功能(拖拽上傳),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03
這篇文章主要介紹了Vue如何解決兄弟組件之間傳值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)帶自動吸附功能的懸浮球，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了驗證碼的用途和分類,展示了如何創(chuàng)建一個簡單的純前端字符驗證碼組件,并通過Canvas增加干擾線和干擾點的效果,通過Vue組件化開發(fā),文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-01-01
使用Element-UI的el-tabs組件,瀏覽器卡住了的問題及解決
這篇文章主要介紹了使用Element-UI的el-tabs組件,瀏覽器卡住了的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue3純前端實現(xiàn)Vue路由權(quán)限的方法詳解
這篇文章主要給大家介紹了關(guān)于Vue3純前端實現(xiàn)Vue路由權(quán)限的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用Vue3具有一定的參考學習價值,需要的朋友可以參考下2022-05-05
這篇文章主要給大家介紹了關(guān)于vue3項目打包與上線的相關(guān)資料,在項目完成得差不多得時候,就可以開始打包部署了,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12