./src/main.js in multi (webpack)-dev-server/client?http://10.104.208.197:8081/sockjs-node...

前情

想要看@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/

参考

• vue cli 官方文档