vue-cli-service使用的入口文件是哪个?

Which is the entry file used by vue-cli-service?

使用 vuewebpackbabelnpm 获得项目。
可以通过 npm run server 启动它,当我试图弄清楚这个命令是如何工作时,我从 package.json.

看到了 vue-cli-service serve

但是,vue-cli-service如何启动程序呢?我看到 main.js 又渲染 Vue.vue,两者都在 src/.

没有在任何地方看到配置入口文件,所以 main.jsvue-cli-service 的默认入口吗?


代码

package.json:

{
  "name": "quizer-ui",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --port 3000",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "element-ui": "^2.10.1",
    "vue": "^2.6.10",
    "vue-router": "^3.0.7"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.9.0",
    "@vue/cli-plugin-eslint": "^3.9.0",
    "@vue/cli-service": "^3.9.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "vue-cli-plugin-element": "^1.0.1",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

vue-cli-service 使用 Webpack,默认配置为

entry: {
  app: [
    './src/main.js'
  ]
}

如果您愿意,可以在 vue.config.js 中对此进行更改。参见 https://cli.vuejs.org/guide/webpack.html#simple-configuration

Webpack 将构建一个 JS 包,从 条目 开始,然后将其注入 index.html 文件,这就是您的应用程序启动的方式。

您可以使用

查看应用的完整配置
vue inspect

https://cli.vuejs.org/guide/webpack.html#inspecting-the-project-s-webpack-config

它在 @vue 中被硬编码。

相对路径:node_modules/@vue/cli-service/lib/config/base.js

第 28-37 行:

    webpackConfig
      .mode('development')
      .context(api.service.context)
      .entry('app')
        .add('./src/main.js')
        .end()
      .output
        .path(api.resolve(options.outputDir))
        .filename(isLegacyBundle ? '[name]-legacy.js' : '[name].js')
        .publicPath(options.publicPath)