Vue 2 中,使用Vite作为前端构建开发工具,替代webpack(一)——vite.config.js配置文件
Vue 2 中,使用Vite作为前端构建开发工具,替代webpack(一)——vite.config.js配置文件当前版本 vite@2.3.7和vite@2.4.4"vite": "^2.4.4",一、 适合什么项目迁移使用 vue2 的系统内部系统 - 无需大型流量场景:因为 vite 更迭较快,导致系统需要定期改动基础功能,造成不稳定非 ssr 系统 - ssr 还有很多问题,暂且等社区丰富
·
Vue 2 中,使用Vite作为前端构建开发工具,替代webpack(一)——vite.config.js配置文件
当前版本 vite@2.3.7
和vite@2.4.4
"vite": "^2.4.4",
一、 适合什么项目迁移
- 使用 vue2 的系统
- 内部系统 - 无需大型流量场景:因为 vite 更迭较快,导致系统需要定期改动基础功能,造成不稳定
- 非 ssr 系统 - ssr 还有很多问题,暂且等社区丰富起来
- 定期有人维护的系统
- 对开发有痛点而想要改进:比如打包慢,冷启动慢,HMR 更新慢。。。。
- vite 生产环境用 rollup,但是改造成本大,提效不高,风险大,暂不建议使用。
二、迁移步骤
将会以内部系统作为案例改造, 开发用 vite,生产依旧保持 webpack。
- 简单了解 vite 特性。有问题优先看vite 官网排查是否有更新或解决方案!!
- npm i vite@2.3.7 vite-plugin-vue2@1.6.2 vite-plugin-html@2.0.7 -D
- package.json 添加一个 script – “vite”: “NODE_ENV=development vite”
- 关键在于配置 vite.config.js【默认叫做这个文件名,可配置成其他的】
根目录下,vite.config.js配置文件
import { defineConfig } from 'vite';
import path from 'path';
import fs from 'fs';
import { createVuePlugin } from 'vite-plugin-vue2';
import { injectHtml, minifyHtml } from 'vite-plugin-html';
import { cjs2esmVitePlugin } from 'cjs2esmodule'
import dotenv from 'dotenv'
const config = require('./config')
try {
// 根据环境变量加载环境变量文件
const file = dotenv.parse(fs.readFileSync(`./config/.env.${process.env.NODE_ENV}`), {
debug: true
})
console.log(file)
// 根据获取的 key 给对应的环境变量赋值
for (const key in file) {
process.env[key] = file[key]
}
} catch (e) {
console.error(e)
}
const API_LOCATION = process.env.API_LOCATION || '/api'
function resolve(dir) {
return path.join(__dirname, './', dir)
}
export default defineConfig({
root: './', // 项目根目录(index.html 文件所在的位置)可以是一个绝对路径,或者一个相对于该配置文件本身的相对路径。
publicDir: 'public', // 作为静态资源服务的文件夹.该值可以是文件系统的绝对路径,也可以是相对于项目的根目录的相对路径。
base: './', // 公共基础路径。改值可以是绝对路径或空字符串
mode: 'development',
optimizeDeps: { // 要预构建的第三方依赖
include: []
},
resolve: {
alias: {
// 'vue': 'vue/dist/vue.esm.js', // 如果是模板解析的 - 使用这个 vue:内部为正则表达式 vue 结尾的
'vendor': resolve('src/vendor'),
'@': resolve('src'),
'~@': resolve('src'),
'~component': resolve('src/components'),
'~config': resolve('config'),
}
},
plugins: [
cjs2esmVitePlugin(), // 将 commonjs 转化为 es module: 有报错
createVuePlugin({
jsx: true,
jsxOptions: {
injectH: false,
},
}),
minifyHtml(), // 压缩 HTML
injectHtml({ // 入口文件 index.html 的模板注入
injectData: { // 模板注入的数据
htmlWebpackPlugin: {
options: {
isVite: true,
shotcut: '/static/img/favicon.png',
}
},
title: 'HMO 运营后台',
},
}),
],
define: {
'process.env': process.env
},
server: {
host: 'liang.myweb.com',
open: true, // 是否自动打开浏览器
port: process.env.PORT || config.dev.port,
proxy: {
[API_LOCATION]: {
target: 'http://127.0.0.1:8001',
rewrite: (path) => path.replace(API_LOCATION, '')
}
}
},
});
更多推荐
已为社区贡献72条内容
所有评论(0)