Vite配置別名之詳解

一、影響到node_modules

在使用Vite進行開發時，當我們使用npm或yarn引入模塊時，會發現在代碼中要使用相對路徑或者絕對路徑去引用是很麻煩的一件事情。這也是因為相對路徑或絕對路徑並不能達到我們想要的快速開發的目的，同時也顯得不夠簡潔易懂。在這種情況下，我們就需要使用Vite做一些配置，來優化我們的開發體驗。當使用Vite配置別名時，會影響到node_modules中的模塊，也使得我們可以使用別名的方式進行引用。我們可以通過以下代碼配置：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm-bundler.js',
      '@': '/src'
    }
  }
});

此時我們就可以不再使用相對路徑或絕對路徑去引入node_modules中的模塊，而是使用我們自定義的別名，來達到快速開發的目的。

二、Vite配置

當我們使用Vite進行開發時，我們需要在項目根目錄下新建一個名為vite.config.js的文件來配置我們的Vite開發環境，其中包含了我們需要用到的各種配置項。而我們在配置別名時，也需要在此文件中進行相應的配置。以下是一個Vite配置別名的示例代碼：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm-bundler.js',
      '@': '/src'
    }
  }
});

在這段代碼中，我們首先使用import導入了defineConfig方法，然後使用export default暴露了我們的配置對象。其中，resolve配置中的alias就是我們配置別名的地方。我們可以採用對象的形式，在其中添加我們的別名與對應的路徑，使得我們可以在代碼中以別名的形式進行引用。

三、Vite配置相對地址

在編寫代碼時，常常會用到相對路徑的方式進行模塊或者組件的引用，而這種方式會顯得非常繁瑣和麻煩，尤其是在項目規模較大的情況下。所以，在使用Vite時，我們可以使用配置相對地址的方式對這種引用方式進行優化。以下代碼示例展示了如何配置相對地址：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm-bundler.js',
      '@': '/src'
    }
  },
  base: './' // 設置基本路徑
});

這裡，我們使用了base屬性，來設置我們的項目的基本路徑。我們可以設置為相對路徑或者絕對路徑。在這裡，我們設置的是相對路徑，即在根目錄下。配置後，我們就可以直接使用相對路徑的方式來引用我們的模塊或者組件了。

四、Vite配置cdn

當我們需要在項目中使用一些第三方的庫或者資源時，為了減少資源的下載時間，提高網頁的載入速度，我們可以使用cdn來進行優化。在使用Vite時，我們也可以對cdn進行相關的配置，使得我們的項目可以更好地使用cdn。以下是一個cdn配置的代碼示例：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm-bundler.js',
      '@': '/src'
    }
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
         vue: ['vue']
        }
      }
    }
  },
  cdn: {
    css: [
      'https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js'
    ],
    js: [
      'https://cdn.bootcdn.net/ajax/libs/vue/3.0.11/vue.cjs.prod.js',
      'https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.8/vue-router.cjs.prod.js',
      'https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js'
    ]
  }
});

在這裡，我們使用了build選項中的rollupOptions配置項來進行了cdn的相關配置。其中，我們設置了manualChunks，將vue打包在一起，使得我們可以更好地使用cdn。同時，我們在cdn配置中，分別設置了css和js兩個資源的cdn地址，讓我們可以通過cdn方式引用這些資源，提高網頁的載入速度。

五、Vite配置Vue

Vue作為現在最受歡迎的前端框架之一，在使用Vite進行開發時，我們也需要對Vue進行相關的配置。以下是一個Vue相關配置的示例代碼：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm-bundler.js',
      '@': '/src'
    }
  },
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => tag.startsWith('i-')
        }
      }
    })
  ]
});

在這段代碼中，我們使用了Vue的插件來進行相關的配置，其中包括了關於Vue模板的一些配置，如isCustomElement。這裡，我們將isCustomElement設置為以i-開頭的標籤都是自定義元素，使得我們可以使用這些自定義元素來進行開發。

六、Vite常用配置

在使用Vite時，還有一些常用的配置項，包括了base、assetsDir、outDir、server、proxy等等。以下是一個常用配置的代碼示例：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  base: './',
  assetsDir: './',
  outDir: 'dist',
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'https://api.xxx.com/',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
});

在這個示例中，我們使用了常用的配置項進行了配置。其中，base屬性設置為相對路徑的根目錄；assetsDir表示靜態資源的位置；outDir指定輸出文件的位置；server中包含了port、open、proxy等屬性，可以進行伺服器的相關配置；最後，我們還配置了伺服器代理，將/api的請求轉發到我們指定的目標地址，使得我們可以在開發中使用代理，更好地調試我們的代碼。

七、Vite配置代理

在使用Vite進行開發時，我們常常需要涉及後台介面調用等情況。為了讓我們的調試更加方便，我們可以使用Vite進行代理配置。以下是一個Vite配置代理的代碼示例：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  proxy: {
    '/api': {
      target: 'http://localhost:3000/',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    }
  }
});

在這個示例中，我們使用了proxy屬性來進行代理的相關配置。其中，target屬性指定我們需要代理的目標地址；changeOrigin屬性可以把我們使用的主機名代理到target目標主機中去；rewrite屬性可以重寫URL路徑，把我們以/api開頭的路徑重定向到目標地址中。

八、Vite配置兩個訪問地址

在進行開發的時候，我們常常需要使用到webpack-dev-server的代理服務和npm run dev所啟動的本地伺服器。而在Vite中，我們同樣可以配置兩個訪問地址，來滿足我們的開發需求。以下是一個Vite配置兩個訪問地址的代碼示例：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:4000/',
        changeOrigin: true
      },
      '/foo': {
        target: 'http://localhost:5000/',
        changeOrigin: true
      }
    }
  }
});

在這個示例中，我們配置了兩個代理地址，分別是/api和/foo。當我們的請求路徑是以/api開頭的話，那麼我們就會訪問到本地伺服器上的4000埠。同理，當我們的請求路徑是以/foo開頭的話，那麼我們就會訪問到本地伺服器上的5000埠。

總結

通過本文的介紹，我們了解了Vite配置別名的多個方面，包括了影響到node_modules、Vite配置、Vite配置相對地址、Vite配置cdn、Vite配置Vue、Vite常用配置、Vite配置代理和Vite配置兩個訪問地址等。對於使用Vite進行開發的同學來說，配置別名是必須要學會的一項知識，可以大大提高我們的開發效率和代碼可讀性。