今天开始用最新的 vue-cli
创建项目的时候,选择自定义配置项目,结果构建完项目,开始 vue add element-plus
的时候给我报了错,给了我源码错误,百思不得其解,然后开始分析这段源码
api.afterInvoke(() => {
const { EOL } = require('os')
const fs = require('fs')
const contentMain = fs.readFileSync(api.resolve(api.entryFile), { encoding: 'utf-8' })
const lines = contentMain.split(/\r?\n/g)
const renderIndex = lines.findIndex(line => line.match(/createApp\(App\)(\.use\(\w*\))*\.mount\(['"]#app['"]\)/))
const renderContent = lines[renderIndex]
lines[renderIndex] = `const app = createApp(App)`
lines[renderIndex + 1] = `installElementPlus(app)`
lines[renderIndex + 2] = renderContent.replace('createApp\(App\)','app')
fs.writeFileSync(api.resolve(api.entryFile), lines.join(EOL), { encoding: 'utf-8' })
})
这是我更改完之后的源代码。
然后可以发现这不就是main.js
里createApp(App).use(store).use(router).mount("#app");
的正则格式化语法嘛,我发现vue自动配置mount("#app")
,仔细看是双引号,而element-plus官方这个api是单引号,我服了,难道不测试不同配置下的情况嘛,只能说这波和vue配合的不是很好,网上这个错误不好找,所以得到一个道理,遇见啥错误直接看源码。
不知道是不是官方小伙独爱单引号, 麻烦修改一下正则吧
最后附上fix code的详细
// ./node_modules/vue-cli-plugin-element-plus/generator/index.js:45:45 bug fix
// edit line 41
// error code
const renderIndex = lines.findIndex(line => line.match(/createApp\(App\)(\.use\(\w*\))*\.mount\('#app'\)/))
// fix code
const renderIndex = lines.findIndex(line => line.match(/createApp\(App\)(\.use\(\w*\))*\.mount\(['"]#app['"]\)/))