vite2.x + vue3 的項目創建，vite.comfig.js的配置

前言：

截止2022-03 vue-cli 腳手架還未集成 vite 打包工具，當前仍然是 webpack，所以本文簡述下vite創建vue3項目的流程

---

 

---

創建 vite + vue3 項目的命令流程：

// 初始化項目，並命名
npm init @vitejs/app test-vue3

// 選擇框架，此處選了vue

// 選擇模板，此處選了vue，可以選擇 vue-ts 

// 運行項目
cd test-vue3
npm install
npm run dev

項目目錄結構：

和vue2的項目結構差不多，主要是兩個變化：

1. index.html 挪到了根目錄下
2. vue.config.js 變成了 vite.config.js
   當然，package.json內還是有變化的

新的項目目錄結構

---

 

---

package.json

{
  "name": "test-vue3",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.2.0",
    "vite": "^2.8.0"
  }
}

以下是筆者根據自己需要修改後的：

點擊查看

{
  "name": "guru-holding",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "serve": "vite",
    "build:test": "vite build --mode test",
    "build:pre": "vite build --mode pre",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "dayjs": "^1.10.7",
    "vant": "^3.4.5",
    "vue": "^3.2.25",
    "vue-i18n": "^9.2.0-beta.30",
    "vue-router": "^4.0.12",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.2.0",
    "eslint": "^7.14.0",
    "eslint-config-sonarjs": "^1.0.19",
    "eslint-plugin-vue": "^7.1.0",
    "less": "^4.1.2",
    "less-loader": "^10.2.0",
    "path": "^0.12.7",
    "vite": "^2.8.0",
    "vite-plugin-html-env": "^1.1.1",
    "vite-plugin-style-import": "^1.4.1"
  }
}

---

 

---

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

以下是筆者根據自己需要修改的，增加了四個模塊

1. 區分不同模式，根據package.json中的scripts下定義的 --mode，再結合 .env.xxx等文件（.env.development、.env.production、env.test等）
2. 定義項目中使用的變量，使用define屬性，注意值必須使用雙引號包裹
3. build 打包相關的配置，主要是將打包的文件分佈在相應的文件夾中，否則都會被放到assets中
4. vite-plugin-html-env 這個插件是配置 html文件中的變量的，可以把.env.xxx中定義的變量嵌入到html中，當時找了好久，注意它的使用

<link rel="stylesheet" href="//<{ VITE_APP_CDN_HOST }>/css/xxx.css" />
<script type="text/javascript" src="//<{ VITE_APP_CDN_HOST }>/js/xxx.js"></script>

點擊查看

import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import VitePluginHtmlEnv from 'vite-plugin-html-env';
import styleImport, { VantResolve } from 'vite-plugin-style-import';

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  console.log('mode', mode);
  const envConfig = loadEnv(mode, process.cwd());
  console.log('envConfig', envConfig);

  const IS_DEV = mode === 'development';

  return {
    // 類似publicPath，定義html中打包文件路徑
    base: envConfig.VITE_APP_PUBLIC_PATH,
    define: {
      'process.env.NODE_ENV': IS_DEV ? '"development"' : '"production"',
      'process.env.BASE_URL': `"${envConfig.VITE_APP_BASE_HOST}"`,
    },
    // VitePluginHtmlEnv 定義html中引入文件路徑
    plugins: [
      vue(),
      VitePluginHtmlEnv(),
      styleImport({
        resolves: [VantResolve()],
      }),
    ],
    resolve: {
      alias: {
        '@': path.resolve('src'),
      },
    },
    server: {
      host: 'localhost',
      port: 8001,
      // 接口代理配置
      proxy: {
        '/api': {
          target: 'http://api.example.com',
          ws: false,
          //是否允許跨域
          changeOrigin: true,
          // rewrite: (path) => path.replace(/^\/api/, ''),
        },
      },
    },
    build: {
      // 構建後是否生成 source map 文件
      sourcemap: false,
      minify: 'terser',
      terserOptions: {
        compress: {
          drop_console: true,
        },
      },
      rollupOptions: {
        // input: {},
        output: {
          assetFileNames: ({name}) => {
            let prefix = '';
            if (name.endsWith('css')) {
              prefix = 'css';
            } else if (name.endsWith('js')) {
              prefix = 'js';
            } else {
              prefix = 'assets';
            }
            return `${prefix}/[name]-[hash][extname]`;
          },
          chunkFileNames: 'js/[name]-[hash].js',
          entryFileNames: 'js/[name]-[hash].js'
        }
      }
    },
  };
});