快捷導(dǎo)航

Vite項(xiàng)目搭建與環(huán)境配置的完整版教程

更新時(shí)間：2023年09月15日 08:51:57 作者：一花一world

Vite?使用?Rollup?作為默認(rèn)的構(gòu)建工具,可以將應(yīng)用程序的源代碼打包成一個(gè)或多個(gè)優(yōu)化的靜態(tài)文件,本文就來為大家介紹一下Vite如何進(jìn)行項(xiàng)目搭建與環(huán)境配置吧

1. 打包構(gòu)建

Vite 使用 Rollup 作為默認(rèn)的構(gòu)建工具。通過運(yùn)行 npm run build 命令，Vite 會將應(yīng)用程序的源代碼打包成一個(gè)或多個(gè)優(yōu)化的靜態(tài)文件，以便在生產(chǎn)環(huán)境中進(jìn)行部署。Vite 的構(gòu)建過程會根據(jù)需要進(jìn)行代碼拆分、壓縮和優(yōu)化，以提供最佳的性能和文件大小。

# package.json
{
  "scripts": {
    "build": "vite build"
  }
}

2. 環(huán)境變量

Vite 支持在項(xiàng)目中使用環(huán)境變量。您可以在項(xiàng)目的根目錄下創(chuàng)建一個(gè) .env 文件，并在其中定義您需要的環(huán)境變量。然后，在您的代碼中，可以使用 import.meta.env 對象來訪問這些環(huán)境變量。Vite 會根據(jù)當(dāng)前的環(huán)境自動加載相應(yīng)的環(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 會提供一個(gè)開發(fā)服務(wù)器，實(shí)現(xiàn)快速的冷啟動和熱重載，以便在開發(fā)過程中獲得即時(shí)的反饋。在生產(chǎn)模式下，Vite 會對應(yīng)用程序進(jìn)行優(yōu)化和打包，以提供更高的性能和更小的文件大小。

# package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

4. 兼容老瀏覽器

Vite 默認(rèn)情況下不支持老版本的瀏覽器，因?yàn)樗褂昧艘恍┈F(xiàn)代的 JavaScript 特性和瀏覽器原生模塊的功能。但是，您可以通過配置文件來啟用對老瀏覽器的支持。通過設(shè)置 target 選項(xiàng)為 es2015，并使用 @vitejs/plugin-legacy 插件，您可以將您的應(yīng)用程序轉(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 提供了原生的支持。您可以在項(xiàng)目中使用 TypeScript 來編寫代碼，并且 Vite 會自動識別和編譯 TypeScript 文件。在使用 TypeScript 的同時(shí)，您可以享受到 Vite 帶來的快速的冷啟動和熱重載的特性。

# main.ts
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.mount('#app');

6. 基本配置

Vite 的基本配置可以通過一個(gè)名為 vite.config.js 的配置文件進(jìn)行設(shè)置。在這個(gè)配置文件中，您可以自定義各種選項(xiàng)，例如入口文件、輸出路徑、插件配置等。您還可以根據(jù)需要使用不同的插件來擴(kuò)展 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：指定項(xiàng)目的根目錄路徑。
base：指定項(xiàng)目的基礎(chǔ)路徑，用于指定靜態(tài)資源的引用路徑。
build：用于配置構(gòu)建相關(guān)的選項(xiàng)，包括輸出目錄、靜態(tài)資源目錄、是否生成源映射等。
plugins：用于配置 Vite 插件，例如 @vitejs/plugin-vue 和 @vitejs/plugin-legacy。
server：用于配置開發(fā)服務(wù)器的選項(xiàng)，包括端口號、代理等。

此外，示例代碼中還展示了一些其他的配置選項(xiàng)的使用：

rollupOptions：用于配置 Rollup 的選項(xiàng)，例如外部依賴和全局變量。
proxy：用于配置開發(fā)服務(wù)器的代理選項(xiàng)，用于將請求代理到其他服務(wù)器。

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
  }
});

這是一個(gè)基本的 Vite 配置文件，包括了以下配置選項(xiàng)：

plugins：使用 @vitejs/plugin-vue 插件來支持 Vue 單文件組件。
resolve.alias：設(shè)置別名，將 @ 指向項(xiàng)目的 src 目錄，方便在代碼中使用絕對路徑引入模塊。
server.port：設(shè)置開發(fā)服務(wù)器的端口號為 3000。

接下來，我們可以在 src 目錄下創(chuàng)建一個(gè)簡單的 Vue 應(yīng)用：

<!-- 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');

在項(xiàng)目根目錄下運(yùn)行 npm install 安裝依賴，然后使用 npm run dev 啟動開發(fā)服務(wù)器。在瀏覽器中打開 http://localhost:3000，您將看到一個(gè)簡單的 Vue 應(yīng)用，顯示 “Hello Vite!” 和 “Welcome to Vite!”。

以上就是Vite項(xiàng)目搭建與環(huán)境配置的完整版教程的詳細(xì)內(nèi)容，更多關(guān)于Vite教程的資料請關(guān)注腳本之家其它相關(guān)文章！