Question

使用vue，webpack，babel，npm进行项目。
可以通过npm run server启动它，当试图弄清楚该命令的工作方式时，我从package.json中看到了vue-cli-service serve。

但是，vue-cli-service如何启动程序？我看到main.js依次呈现Vue.vue，它们都在src/下。

在任何地方都看不到配置入口文件，main.js是vue-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"
  ]
}

Answer 1

fred,"Frederick the Great" fred, fred bob, "Spongey" bob, bob alice, alice使用Webpack，其默认配置为

vue-cli-service

如果愿意，可以在entry: { app: [ './src/main.js' ] }中进行更改。参见https://cli.vuejs.org/guide/webpack.html#simple-configuration

Webpack将从 entry 开始构建一个JS捆绑软件，然后将其注入vue.config.js文件中，这就是您的应用程序启动的方式。

您可以使用来查看应用程序的整个配置

index.html

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

Answer 2

它被硬编码在@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)

vue-cli-service使用哪个入口文件？

代码

2 个答案: