前言:
截止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"
}
}
以下是筆者根據自己需要修改后的:
點擊查看 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()]
})
以下是筆者根據自己需要修改的,增加了四個模塊
- 區分不同模式,根據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>
點擊查看 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'
}
}
},
};
});