快捷導(dǎo)航

Vue+vite創(chuàng)建項(xiàng)目關(guān)于vite.config.js文件的配置方法

更新時(shí)間：2023年06月29日 10:10:18 投稿：mrr

Vue項(xiàng)目創(chuàng)建時(shí)，我們見過vue-cli 創(chuàng)建項(xiàng)目和webpack 創(chuàng)建項(xiàng)目等方式，這篇文章主要介紹了Vue+vite創(chuàng)建項(xiàng)目關(guān)于vite.config.js文件的配置方法,需要的朋友可以參考下

Vue+vite創(chuàng)建項(xiàng)目關(guān)于vite.config.js文件的配置

Vue項(xiàng)目創(chuàng)建時(shí)，我們見過vue-cli 創(chuàng)建項(xiàng)目和webpack 創(chuàng)建項(xiàng)目等方式?，F(xiàn)在Vue 3版本使用npm/pnpm create vue@latest 創(chuàng)建項(xiàng)目，是搭配使用vite工具構(gòu)建的。創(chuàng)建完成的項(xiàng)目，最明顯的去別就是，項(xiàng)目配置文件命名不同，當(dāng)然，配置語法也有不同。

vue-cli 創(chuàng)建的項(xiàng)目，項(xiàng)目配置文件文件名為vue.config.js,webpack 創(chuàng)建項(xiàng)目的項(xiàng)目配置文件文件名為webpack.config.js，而vite工具構(gòu)建完成的項(xiàng)目，項(xiàng)目配置文件文件名為vite.config.js

在這里插入圖片描述

先貼一個(gè)vite官方地址：https://cn.vitejs.dev/

關(guān)于vite.config.js的配置語法：

創(chuàng)建項(xiàng)目之后，默認(rèn)生成的vite.config.js文件比較簡(jiǎn)單，只有簡(jiǎn)單幾行代碼：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
})

這樣直接運(yùn)行項(xiàng)目或者build大包代碼也基本上沒有什么問題，但是往往無法滿足我們的需要，因此需要自己手動(dòng)添加屬性配置。簡(jiǎn)單解釋：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 這里是創(chuàng)建文檔之后vite貼出的官方文檔地址
// https://vitejs.dev/config/
export default defineConfig({
  // 需要用到的插件數(shù)組，這里是用vue
  plugins: [vue()],
  resolve: {
  	// resolve.alias屬性配置文件自定義路徑。如下：設(shè)置‘@'代替‘./src'
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
})

根據(jù)需要添加自定義配置，比如項(xiàng)目運(yùn)行時(shí)的配置及項(xiàng)目打包輸出的打包配置。

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 這里是創(chuàng)建文檔之后vite貼出的官方文檔地址
// https://vitejs.dev/config/
export default defineConfig({
  // 需要用到的插件數(shù)組，這里是用vue
  plugins: [vue()],
  resolve: {
  	// resolve.alias屬性配置文件自定義路徑。如下：設(shè)置‘@'代替‘./src'
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  // 開發(fā)服務(wù)器配置server
  server: {
  	// host指定服務(wù)器應(yīng)該監(jiān)聽哪個(gè) IP 地址。 如果將此設(shè)置為 0.0.0.0 或者 true 將監(jiān)聽所有地址，包括局域網(wǎng)和公網(wǎng)地址。
    host: true,
    // 開發(fā)服務(wù)器端口配置。（注意：如果配置的端口已經(jīng)被使用，Vite 會(huì)自動(dòng)嘗試下一個(gè)可用的端口，要看項(xiàng)目運(yùn)行時(shí)最終生成的端口地址。）
    port: '9081',
    // open項(xiàng)目運(yùn)行完畢是否自動(dòng)在默認(rèn)瀏覽器打開
    open: true,
    // 是否使用https，需要證書
    https: false,
    // proxy代理配置
    proxy: {
      '/api': {
        target: 'http://xxxx',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  },
  // build打包構(gòu)建配置
  build: {
  	// 打包輸出的文件夾名稱
    outDir: 'dist',
    // 靜態(tài)資源文件保存的文件夾名稱
    assetsDir: 'static',
    // 是否啟用css代碼拆分
    cssCodeSplit: true,
    // 打包構(gòu)建后是否生成 source map 文件。
    sourcemap: true,
    // 打包構(gòu)建時(shí)壓縮混淆使用的混淆器
    minify: 'esbuild',
    // 自定義底層的 Rollup 打包配置（Rollup文檔地址：https://cn.rollupjs.org/configuration-options/）
    rollupOptions: {
      // 輸出配置
      output: {
      	// 輸出的文件自定義命名
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
        assetFileNamesL: '[ext]/[name]-[hash].[text]'
      }
    }
  }
})

END

當(dāng)然，還有很多配置屬性起到不同的效果，這里暫時(shí)記錄這些，有興趣的大佬可以看看官方文檔。

到此這篇關(guān)于Vue+vite創(chuàng)建項(xiàng)目關(guān)于vite.config.js文件的配置的文章就介紹到這了,更多相關(guān)vite.config.js文件的配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: