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的專案結構差不多，主要是兩個變化：
- index.html 挪到了根目錄下
- 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()]
})
以下是筆者根據自己需要修改的，增加了四個模組
- 區分不同模式，根據package.json中的scripts下定義的
--mode，再結合 .env.xxx等檔案（.env.development、.env.production、env.test等） - 定義專案中使用的變數，使用
define屬性，注意值必須使用雙引號包裹 - build 打包相關的配置，主要是將打包的檔案分佈在相應的資料夾中，否則都會被放到assets中
- 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'
}
}
},
};
});
</details>