一. 适宜甚么工程项目北迁
采用 vue2 的控制系统
外部控制系统 – 无须小型网络流量情景：即使 vite 更替较快，导致控制系统须要不定期更动此基础机能，导致不平衡
非 SSR 控制系统 – SSR 除了许多难题，如若等街道社区多样出来
不定期没人保护的控制系统
对合作开发有关键点而想改良：比如说装箱慢，UAC慢，HMR 预览慢。。。。
vite 制造自然环境用 rollup，但改建生产成本大，增效不高，风险大，暂不提议采用。【生前莫管，元老轻喷】
二.北迁关键步骤
Sonbhadra以外部控制系统做为事例改建, 合作开发用 vite，制造依然维持 webpack。
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 }) 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, ) } } }, });
三.常用难题【踩坑日记】
1. vite 目前要求入口文件必须是根目录下的 index.html，如果之前的 webpack 入口文件同名，须要更改。解决方案：vite.config.js:
import { injectHtml } from vite-plugin-html; export default defineConfig({ plugins:[ injectHtml({ // 入口文件 index.html 的模板注入 injectData: { // 模板注入的数据 htmlWebpackPlugin: { // 取和 webpack 插件同名的对象 key，即可 options: { isVite: true, shotcut: /static/img/favicon.png, } }, title: HMO 运营后台 }, }) ] })
new HtmlWebpackPlugin({ template: index.html, inject: true, isVite: false // 添加标识 })
根目录入口文件 index.html – ejs 模板
<% if (htmlWebpackPlugin.options.isVite) { %> <script type=”module” src=”/src/main.js”></script> <%}%>
Uncaught SyntaxError: The requested module /config/index.js does not provide an export named defaultUncaught SyntaxError: The requested module /config/index.js does not provide an export named default
错误原因：浏览器仅支持 esm,不支持 cjs vite.config.js
import { cjs2esmVitePlugin } from cjs2esmodule export default defineConfig({ plugins: [ cjs2esmVitePlugin(), // 将 commonjs 转化为 es module ] })
如果有 require.xx 的按需加载写法还可以修改成 import 的，事例如下：
const subjectList = r => require.ensure( [], () => r(require(@/pages/xxx/subject/list.vue)), subject ); // 改为：Vue 动态组件 component: ()=>import() const subjectList = () => import(/* webpackChunkName: “subject” */ @/pages/xxx/subject/list.vue) const arr = [ { path: /subject/list, name: subject/list, component: subjectList meta: {…} } ]; export default arr;
4. proxy 采用 http-proxy。完整选项详见 此处.事例：
proxy: { /rest: { target: http://my.web.com/, changeOrigin: true, bypass: (req, res, proxyOption) => { console.log(`现阶段请求代理：${req.url} -> ${proxyOption.target}`); }, }, }
5. ts 文件报错?验证与否配置了 vite 的 ts 处理
“compilerOptions”: { “types”: [“vite/client”] }
// const isProd = ENV === production; // webpack – dev 自然环境变量 // const isProd = import.meta.env.PROD; // vite – dev 自然环境变量 // 可以避开上面的，采用 NODE_ENV 来区分： const isProd = process.env.NODE_ENV === production; 那么我们启动的时候：”dev”: “NODE_ENV=development vite”
或者可以探索一下街道社区的 babel 插件：babel-preset-vite【包含以下两个机能】babel-plugin-transform-vite-meta-envbabel-plugin-transform-vite-meta-glob
cli –debug，或者 vite.config.js 配置打印相关参数
8. 引入文件，比如说.vue 的时候，不可以省略扩展名?
是的!!!不是他们不会做，是他们不想做，就是这么设计的，具体请戳这里, 尤元老推特解释然后加上 resolve.extensions: [.vue] 直接在控制台报错：所以没用。。。
error: No loader is configured for “.vue”
害!老老实实加上扩展名!【在线】 方便的全局加上扩展名方法如下：链接
[vite] Internal server error: ~@/styles/var.less wasnt found.
(1)确定已经支持 less：npm install -D less(2)别忘了 resolve.alias 也加上一个：~@: resolve(src)
import { createVuePlugin } from vite-plugin-vue2; createVuePlugin({ jsx: true, // 配置 jsx jsxOptions: { injectH: false, }, })
Vue.component(my-component,{ render () { return (<div>my template</div>) } })
(1)cross-env 来跨平台设置自然环境变量
1. 安装 cross-envnpm i cross-env -D
(2)加载自然环境变量文件。它能将自然环境变量中的变量从 .env 文件加载到 process.env 中
2. 安装 dotenvnpm i dotenv -D
(3)config/.env.development 配置变量
NODE_ENV = development API_LOCATION = /api LOGOUT_PC_LOCATION = http://user.myweb.com/login CRM_ADDRESS = http://crm.myweb.com
try { // 根据自然环境变量加载自然环境变量文件 const file = dotenv.parse(fs.readFileSync(`./config/.env.${process.env.NODE_ENV}`), { debug: true }) console.lo { console.error(e) } const API_LOCATION = process.env.API_LOCATION || /api ….. 此处省略 export default defineConfig({ server: { proxy: { [API_LOCATION]: { target: http://127.0.0.1:8001, rewrite: (path) => path.replace(API_LOCATION, ) // 根据自然环境变量配置代理 } } } })
(5)package.json 启动 script
“vite”: “cross-env NODE_ENV=development vite”
原来 webpack 采用的自然环境变量 process.env，vite 没有这个，所以报错
Uncaught ReferenceError: process is not defined
vite 采用的时候import.meta.env, 但我们老的代码不想动怎么办?其实 vite 也还是留了口子给我们定义全局变量[类型不能是 function]
export default defineConfig({ // … define: { process.env: {} } })
….. bug 无止境，许多都是非通用难题，都是引入 vite 后发现的控制系统本身的一些难题，这里就不一一举例了。后续会追踪更多通用难题
