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

前一段时间重装了系统， 准备重新调试下之前开发的简单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 就可以了。

此篇文章已被阅读1104 次