使用 vue/cli 创建了一个新的 vue 项目但无法服务
Created a new vue project using vue/cli create but cannot serve
上周我在创建一个新项目并为它服务时没有任何问题,但是今天当我使用vue/cli创建一个新的默认项目时,我在服务时遇到了编译错误。
PS E:\Projects\testing> yarn serve
yarn run v1.22.5
$ vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
ERROR Failed to compile with 1 error 下午12:22:33
error in ./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js
Module parse failed: Unexpected token (763:13)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| class RefImpl {
> _rawValue;
| _shallow;
| _value;
@ ./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js 1:0-233 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 16:4-17 40:4-17 107:13-18 108:32-37 115:16-21 1958:8-13 1962:13-23 1968:35-45 1970:16-21 1973:21-31 2071:19-25 2094:8-12 2135:8-13 2210:29-34 2557:27-30 2558:26-29 2559:28-31 2905:16-29 2912:16-29 3043:28-36 3362:41-56 3378:28-33 3463:8-15 3500:32-37 3647:27-32 3823:29-34 3951:12-25 3958:12-25 4568:17-22 4592:13-18 5173:26-32 5336:8-21 5340:8-21 5755:16-20 5761:12-16 6296:27-32 6328:12-19 6338:16-23 6356:93-100 6357:15-20 6767:60-75 6768:60-75 6769:60-75 6770:59-74 6847:16-21 6997:16-21 7150:21-28 7160:8-21 7161:134-149 7162:8-21 7210:30-39 7264:8-21 7266:8-21 7314:23-38 7334:46-55 7334:56-63 7389:14-24 7576:21-26 7586:21-31 7593:24-34 7596:21-31 7624:53-58 7630:52-57 7696:48-53
@ ./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js
@ ./node_modules/vue/dist/vue.runtime.esm-bundler.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.1.102:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
我可以正确地服务于我所有的旧项目,然后我尝试重新安装不同版本的 vue/cli 和 nodejs,但没有任何改变。
目前我的nodejs版本:v14.17.0
vue/cli: 4.5.13
我该怎么办?
更新
我通过在 node_modules/@vue/runtime-core/dist/
中编辑 reactivity.esm-bundler.js
以某种方式解决了这个错误
class RefImpl {
_rawValue;
_shallow;
_value;
__v_isRef = true;
constructor(_rawValue, _shallow) {
this._rawValue = _rawValue;
this._shallow = _shallow;
this._value = _shallow ? _rawValue : convert(_rawValue);
}
get value() {
track(toRaw(this), "get" /* GET */, 'value');
return this._value;
}
set value(newVal) {
if (hasChanged(toRaw(newVal), this._rawValue)) {
this._rawValue = newVal;
this._value = this._shallow ? newVal : convert(newVal);
trigger(toRaw(this), "set" /* SET */, 'value', newVal);
}
}
}
之后:
class RefImpl {
constructor(_rawValue, _shallow = false) {
this._rawValue = _rawValue;
this._shallow = _shallow;
this.__v_isRef = true;
this._value = _shallow ? _rawValue : convert(_rawValue);
}
get value() {
track(toRaw(this), "get" /* GET */, 'value');
return this._value;
}
set value(newVal) {
if (hasChanged(toRaw(newVal), this._rawValue)) {
this._rawValue = newVal;
this._value = this._shallow ? newVal : convert(newVal);
trigger(toRaw(this), "set" /* SET */, 'value', newVal);
}
}
}
我不太确定,也许这个错误与ES版本有关?
如果是这样,我应该在哪里配置才能使事情正确?
删除终端中的node_modules
和运行npm install
。这可能对你有帮助。
更新:使用 Vue 3.1.4
现在的错误是 fixed in Vue 3.1.4,所以只需在您的项目中安装更新版本的 vue
:
npm uninstall vue
npm i -S vue@3.1.4
这是一个已知的 issue 与 Vue CLI 4.5.13,它安装 Vue 3.1.3。有一些解决方法可用。
解决方法 1:转译 @vue/reactivity
// vue.config.js
module.exports = {
transpileDependencies: ['@vue/reactivity']
}
解决方法 2:降级到 Vue 3.1.2
npm uninstall vue
npm i -S vue@3.1.2
解决方法 3:使用 Vue CLI 5(测试版)
npm i -g @vue/cli@5
上周我在创建一个新项目并为它服务时没有任何问题,但是今天当我使用vue/cli创建一个新的默认项目时,我在服务时遇到了编译错误。
PS E:\Projects\testing> yarn serve
yarn run v1.22.5
$ vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
ERROR Failed to compile with 1 error 下午12:22:33
error in ./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js
Module parse failed: Unexpected token (763:13)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| class RefImpl {
> _rawValue;
| _shallow;
| _value;
@ ./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js 1:0-233 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 16:4-17 40:4-17 107:13-18 108:32-37 115:16-21 1958:8-13 1962:13-23 1968:35-45 1970:16-21 1973:21-31 2071:19-25 2094:8-12 2135:8-13 2210:29-34 2557:27-30 2558:26-29 2559:28-31 2905:16-29 2912:16-29 3043:28-36 3362:41-56 3378:28-33 3463:8-15 3500:32-37 3647:27-32 3823:29-34 3951:12-25 3958:12-25 4568:17-22 4592:13-18 5173:26-32 5336:8-21 5340:8-21 5755:16-20 5761:12-16 6296:27-32 6328:12-19 6338:16-23 6356:93-100 6357:15-20 6767:60-75 6768:60-75 6769:60-75 6770:59-74 6847:16-21 6997:16-21 7150:21-28 7160:8-21 7161:134-149 7162:8-21 7210:30-39 7264:8-21 7266:8-21 7314:23-38 7334:46-55 7334:56-63 7389:14-24 7576:21-26 7586:21-31 7593:24-34 7596:21-31 7624:53-58 7630:52-57 7696:48-53
@ ./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js
@ ./node_modules/vue/dist/vue.runtime.esm-bundler.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.1.102:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
我可以正确地服务于我所有的旧项目,然后我尝试重新安装不同版本的 vue/cli 和 nodejs,但没有任何改变。
目前我的nodejs版本:v14.17.0
vue/cli: 4.5.13
我该怎么办?
更新
我通过在 node_modules/@vue/runtime-core/dist/
reactivity.esm-bundler.js
以某种方式解决了这个错误
class RefImpl {
_rawValue;
_shallow;
_value;
__v_isRef = true;
constructor(_rawValue, _shallow) {
this._rawValue = _rawValue;
this._shallow = _shallow;
this._value = _shallow ? _rawValue : convert(_rawValue);
}
get value() {
track(toRaw(this), "get" /* GET */, 'value');
return this._value;
}
set value(newVal) {
if (hasChanged(toRaw(newVal), this._rawValue)) {
this._rawValue = newVal;
this._value = this._shallow ? newVal : convert(newVal);
trigger(toRaw(this), "set" /* SET */, 'value', newVal);
}
}
}
之后:
class RefImpl {
constructor(_rawValue, _shallow = false) {
this._rawValue = _rawValue;
this._shallow = _shallow;
this.__v_isRef = true;
this._value = _shallow ? _rawValue : convert(_rawValue);
}
get value() {
track(toRaw(this), "get" /* GET */, 'value');
return this._value;
}
set value(newVal) {
if (hasChanged(toRaw(newVal), this._rawValue)) {
this._rawValue = newVal;
this._value = this._shallow ? newVal : convert(newVal);
trigger(toRaw(this), "set" /* SET */, 'value', newVal);
}
}
}
我不太确定,也许这个错误与ES版本有关?
如果是这样,我应该在哪里配置才能使事情正确?
删除终端中的node_modules
和运行npm install
。这可能对你有帮助。
更新:使用 Vue 3.1.4
现在的错误是 fixed in Vue 3.1.4,所以只需在您的项目中安装更新版本的 vue
:
npm uninstall vue
npm i -S vue@3.1.4
这是一个已知的 issue 与 Vue CLI 4.5.13,它安装 Vue 3.1.3。有一些解决方法可用。
解决方法 1:转译 @vue/reactivity
// vue.config.js
module.exports = {
transpileDependencies: ['@vue/reactivity']
}
解决方法 2:降级到 Vue 3.1.2
npm uninstall vue
npm i -S vue@3.1.2
解决方法 3:使用 Vue CLI 5(测试版)
npm i -g @vue/cli@5