vue&webpack升级后代码无法runtime运行和编译的解决

Life is short , play more!
本文来自lihao's Blog,转载请注明。

前一段时间重装了系统, 准备重新调试下之前开发的简单spa应用(vue)。 安装了最新的node后, 重新安装vue和相关webpack,结果发现再次runtime运行和编译都不太正常。 尝试升级了很多package后, 还是有一些莫名其妙的错误。 除了package的要升级外, 可能还存在因为升级更新导致的config需要修改的情况。

尝试手动升级并解决的过程中,碰到有很多错误,均需要一点点排查比较费工夫。

例如:

Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type.

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
at Object.get [as CommonsChunkPlugin] (F:\code\xxx\node_modules\webpack\lib\webpack.js:185:10)
at Object. (F:\code\xxx\build\webpack.prod.conf.js:82:26)
at Module._compile (internal/modules/cjs/loader.js:688:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)


一点点修改比较麻烦,索性还是取现救国一下。 重新通过模板创建新的工程,然后将代码源文件拷贝过来,不修改自动生成的项目配置。
老的项目是用vue-cli version2 进行创建的,目前vue cli 已经升级到了version 3。

1) 首先下载vue version3.
$npm install -g @vue/cli
$ vue -V
3.2.1

因为老的项目是用webpack模板创建的, 这里我们可以安装老的webpack 功能模板。
$npm install -g @vue/cli-init
$vue init webpack my-project

2) 第二步把我们老的项目工程的代码仅/src 代码目录和项目根目录的index.html 文件拷贝到新创建的工程里

$cp -rf old_project/src/* new_project/src/
安装原来依赖的一些三方包, 因为新工程项目里没有安装。

3) 然后我们尝试 npm run dev 或者 npm run build 就可以了。


发表评论

电子邮件地址不会被公开。 必填项已用*标注