# Vite 與環境變數設定
###### tags: `Vite`
## Vite Config 說明
當建立完成Vite專案時，根目錄中會有一個檔案名為vite.config.js，當以命令行方式運行 vite 時，Vite會自動解析項目根目錄下該支檔案，所以關於Vite相關設定，都在vite.config.js中設定。

## Vite Config 設定
當專案建立時，會自動產生vite.config.js，內容如下圖

### Step 1.改寫 defineConfig
首先我們先把defineConfig內的參數，改寫成有參數的function，再來透過loadEnv，讀取環境變數。
VITE_BASE是我設定的環境變數，在Step 2.會說明如何設定。

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig(({ command, mode, ssrBuild }) => {
  // 根據當前工作目錄中的 `mode` 加載 .env 文件
  // 設置第三個參數為 '' 來加載所有環境變量，而不管是否有 `VITE_` 前綴。
  const env = loadEnv(mode, process.cwd())
  console.log( env.VITE_BASE); //輸出VITE_BASE的環境變數
  return {
    plugins: [vue()],
  }
})

### Step 2.環境變數設定
Vite專案建立時，會預設建立兩種執行模式，分別是development與production，對應三個指令，分別如下:
:::info
npm run dev --> development
npm run build --> production
npm run preview --> production
:::
### 那如何針對不同模式設定專屬的環境變數呢?
在官方文件中有提到，開發者可以在專案的根目錄內，自行建立.env.development與.env.production兩支檔案，當專案在執行時，就對依不同模式，載入個別的設定檔。



當開發過程中，覺得只有兩個模式不夠用時，可以在自訂義新模式
在根目錄中，新增一個.env.<font style='color:red'>新模式名稱</font>


在package.json，新增呼叫該模式的指令
:::info
"build:<font style='color:red'>新模式名稱</font>": "vite build --mode <font style='color:red'>新模式名稱</font>"
:::

#### 環境變數引用範例

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig(({ command, mode, ssrBuild }) => {
  // 根據當前工作目錄中的 `mode` 加載 .env 文件
  // 設置第三個參數為 '' 來加載所有環境變量，而不管是否有 `VITE_` 前綴。
  const env = loadEnv(mode, process.cwd())
  console.log( env.VITE_BASE); //輸出VITE_BASE的環境變數
  return {
    plugins: [vue()],
    base: env.VITE_BASE, //不同模式設定不同路徑
  }
})

### Step 3.Vite Config 常用設定
#### 路徑別名設置

我們可以import path，來進行路徑別名的設定。
:::warning
path:處理路徑模組提供用於處理文件和目錄路徑的實用程序。
_dirname: vite.config.js 文件所在的目錄。
:::

import path from 'path';
export default defineConfig(({ command, mode, ssrBuild }) => {
    ...
    return {
        ...
        resolve: {
          alias: {
            '@': path.resolve(__dirname, 'src'),
            '/images': 'src/assets/images',
          }
        },
    }
}

當程式碼在import檔案時，即可做以下修改。

import HelloWorld from '@/components/HelloWorld.vue'

以別名方式引入圖片

<img src="/images/logo.png" alt="">

#### css 配置
全局都可以引用base.scss ，需在config中進行設置，範例如下：

export default defineConfig(({ command, mode, ssrBuild }) => {
    ...
    return {
        ...
        css: {
          preprocessorOptions: {
            scss: {
              additionalData: `@import "@/assets/scss/base.scss";`
            }
          }
        },
    }
}

#### 跨domain proxy 設定

export default defineConfig(({ command, mode, ssrBuild }) => {
    ...
    return {
        ...
        server: {
            proxy: {
              // 字串寫法
              '/foo': 'http://localhost:4567',
              // 選項寫法
              '/api': {
                target: 'http://jsonplaceholder.typicode.com',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
              },
              // 正則寫法
              '^/fallback/.*': {
                target: 'http://jsonplaceholder.typicode.com',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/fallback/, '')
              },
            }
          }
    }
}

#### 跨domain proxy 設定

// vite.config.js
// enforce:
//     pre：在 Vite 核心插件之前呼叫該插件
//     預設：在 Vite 核心插件之後呼叫該插件
//     post：在 Vite 建置插件之後呼叫該插件
// apply: 
//     屬性指明它們僅在 'build' 或 'serve' 模式時調用
import image from '@rollup/plugin-image'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    {
      ...image(),
      enforce: 'pre',
      apply: 'build',
    },
  ],
})

#### 共享配置
[請觀看官方文檔](https://cn.vitejs.dev/config/shared-options.html#esbuild)

## 參考資料
* [Config 常見配置](https://ithelp.ithome.com.tw/articles/10270465)
* [環境變數設定](https://editor.leonh.space/2021/vite/)
* [官方文檔配置 Vite](https://cn.vitejs.dev/config/)
* [官方文檔-環境變量和模式](https://cn.vitejs.dev/guide/env-and-mode.html#modes)
* [vite處理各種靜態資源](https://juejin.cn/post/7163543129797328904)
* [配置Vite2环境变量](https://blog.csdn.net/Big_Wee/article/details/119212231)
* [vite 插件推荐](https://hu-snail.github.io/vue3-resource/platform/vite.html)
* [vite.config.js 完整配置](https://blog.csdn.net/tangkthh/article/details/120176518)