關於vite創建的vue3項目添加配置文件vite.config.js

初次接觸vue3，有什么不足之處，多多探討<~>

首先用vite創建初始vue項目后，會生成一個默認的vite.config.js文件，如下

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()] })
顯然不能滿足需求
於是我們可以自行添加大多數配置，修改如下

import vue from '@vitejs/plugin-vue'
const path = require('path')
// vite.config.js # or vite.config.ts
console.log(path.resolve(__dirname, './src'))
module.exports = {
  plugins: [vue()],
  "resolve.alias": {
    // 鍵必須以斜線開始和結束
    '/@/': path.resolve(__dirname, './src')
  },
  hostname: '127.0.0.1',
  port: 3000,
  // 是否自動在瀏覽器打開
  open: true,
  // 是否開啟 https
  https: false,
  // 服務端渲染
  ssr: false,
  /**
   * 在生產中服務時的基本公共路徑。
   * @default '/'
   */
  base: './',
  /**
   * 與“根”相關的目錄，構建輸出將放在其中。如果目錄存在，它將在構建之前被刪除。
   * @default 'dist'
   */
  outDir: 'dist',
  // 反向代理，此處應該特別注意，網上很多教程是直接設置proxy，並沒有向官網那樣添加 server，可能會導致失敗，vite官網：https://vitejs.dev/guide/features.html#async-chunk-loading-optimization

 server:{ 31     proxy: {
      '/api': {
        target: 'https://api.pingping6.com/tools/baidutop/',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
  
}

大致如上，主要是設置代理的時候需要特別注意