前情
想要看@vue/cli创建的项目和普通npm install 的项目区别,故将@vue/cli 创建的项目除了App.vue
,main.js
和package.json
三个文件之外的其他文件删除,该三个文件在同一个目录下。然后使用npm install
安装依赖,然后使用npm run serve
命令启动本地开发环境,报如下错误:
$ npm run serve
vue-cli-service serve
INFO Starting development server...
98% after emitting
2:52:21 PM
This relative module was not found:
* ./src/main.js in multi (webpack)-dev-server/client?http://10.104.208.197:8081/sockjs-node (webpack)/hot/dev-server.js ./src/main.js, multi (webpack)-dev-server/client?http://localhost (webpack)/hot/dev-server.js (webpack)-dev-server/client?http://10.104.208.197:8081/sockjs-node ./src/main.js
原因
使用如下命令查看webpack 配置:
vue-cli-service inspect --mode
{
mode: 'development',
...
entry: {
app: [
'./src/main.js'
]
}
}
如上输出,发现[entry]
被指定为入口文件,恍然大悟,项目结构不对,遂将App.vue
和main.js
文件移动到新建src
文件夹下,重新启动,正常运行。
$ npm run serve
vue-cli-service serve
INFO Starting development server...
98% after emitting
DONE Compiled successfully in 2721ms 3:14:03 PM
App running at:
- Local: http://localhost:8081/
- Network: http://10.108.29.14:8081/