vite.config.js の一般的に使用される構成

素早く

Vite は、新しいタイプのフロントエンド開発および構築ツールです。これは、驚くほど高速なホット モジュール アップデート (HMR) など、ネイティブ ES モジュールに基づいた豊富な組み込み機能を提供する開発サーバーです。

中国語のドキュメント

Viteを選ぶ理由

アドバンテージ：

1. サービスの起動が非常に速く、パッケージング操作を待つ必要がありません。
2. 軽量で高速なホット リロード。アプリケーションのサイズに関係なく、常に非常に高速なモジュール ホット リロード (HMR)。
3. 最適化されたビルド、オンデマンドでコンパイルされ、アプリケーション全体がコンパイルされるのを待つ必要がなくなりました。
4. 豊富な機能。TypeScript、JSX、CSS などをすぐにサポート。
5. ユニバーサル プラグイン、完全に型指定された API。

環境構成

.env.production次の内容の新しいファイルを作成します。

# 环境模式
VITE_APP_MODE = production
VITE_APP_ENV = production

.env.test次の内容の新しいファイルを作成します。

# 环境模式
VITE_APP_MODE = test
VITE_APP_ENV = production

package.jsonファイルを変更する

{
    
    
  "scripts": {
    
    
    "dev": "vite",
    "test": "vite build --mode test",
    "build": "vite build --mode production"
  },
}

共通構成

import {
    
     defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import legacy from '@vitejs/plugin-legacy'
import path from 'path'

const resolve = str => path.resolve(__dirname, str)

export default defineConfig(({
     
      mode }) => {
    
    
  const ENV = loadEnv(mode, __dirname)
  const IS_DEV = ENV.VITE_APP_ENV !== 'production'

  return {
    
    
	  base: './',
	  resolve: {
    
    
	    alias: {
    
    
	      '@': resolve('src')
	    },
	    extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
	  },
	  build: {
    
    
	    // 打包构建输出路径
	    outDir: 'dist',
	     // 生成静态资源的存放路径
	     assetsDir: 'static',
	     // 构建后是否生成 source map 文件
	     sourcemap: IS_DEV,
	     // chunk 大小警告的限制
	     chunkSizeWarningLimit: 700,
	     // 生产环境移除 console
	     minify: 'terser',
	     terserOptions: {
    
    
	       compress: {
    
    
	         drop_console: !IS_DEV,
	         drop_debugger: !IS_DEV
	       }
	     },
	    rollupOptions: {
    
    
	      output: {
    
    
	        // https://rollupjs.org/guide/en/#outputmanualchunks
	        manualChunks: {
    
    
	          vlib: ['vue', 'vue-router', 'vuex']
	        }
	      }
	    }
	  },
	  server: {
    
    
	    port: 8088,
	    open: true,
	    proxy: {
    
    
	      '/api': 'http://127.0.0.1:3000'
	    },
	    cors: true
	  },
	   css: {
    
    
	    // 处理打包出现警告 "@charset" must be the first
	    postcss: {
    
    
	      plugins: [
	        {
    
    
	          postcssPlugin: 'internal:charset-removal',
	          AtRule: {
    
    
	            charset: atRule => {
    
    
	              if (atRule.name === 'charset') {
    
    
	                atRule.remove()
	              }
	            }
	          }
	        }
	      ]
	    }
	  },
	  plugins: [
	    vue(),
	    vueJsx(),
	    legacy()
	  ],
  }
})