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

Posted 2023-02-23

【中文标题】vue-cli-service 使用的入口文件是哪个？

【英文标题】：Which is the entry file used by vue-cli-service?

【发布时间】：2019-12-04 07:36:41

【问题描述】：

有一个项目使用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"
  ]

【问题讨论】：

向我们展示您的package.json。

@YongQuan 已添加。

命令解析here。

【参考方案1】：

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

【参考方案2】：

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

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

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

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

您可以使用

查看您的应用的整个配置

vue inspect

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