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"
  }
}

以下是笔者根据自己需要修改后的：

点击查看 package.json

{
  "name": "test-vue3",
  "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>

点击查看 vite.config.js

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'
        }
      }
    },
  };
});