Vue CLI 3是如何加载main.js

 

1、前言

在工程文件中使用main.js来加载App.vue文件的，但没有代码写出来加载main.js的，而index.html中只有一个自定义标签app，那么工程是如何加载到main.js文件的呢？

1、Vue 2.x加载方式

如果你是用vue.js官网提供的脚手架工具并沿用默认配置的话， 
你执行npm run dev的时候会出来页面， 
是因为你根目录下的package.json文件里script配置了

"dev": "node build/dev-server.js"

也就是其实执行的是dev-server.js这个文件，里面有定义

var webpackConfig = require('./webpack.dev.conf');

因为我们这个脚手架工具里是用webpack来打包项目文件的，依赖的webpack.dev.conf文件里又定义了

var baseWebpackConfig = require('./webpack.base.conf');

在这个依赖webpack.base.conf文件里面entry入口文件就配置了

app: './src/main.js'

所以当你运行npm run dev的时候就从main.js这个入口文件开始执行了

参考原文：https://blog.csdn.net/grape875499765/article/details/75279343

2、Vue3.x加载方式

CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。

CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。它包含了：

• 加载其它 CLI 插件的核心服务；
• 一个针对绝大部分应用优化过的内部的 webpack 配置；
• 项目内部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令。

项目启动命令

在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。

这是你使用默认 preset 的项目的 package.json：

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "vue": "^2.5.21"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.3.0",
    "@vue/cli-plugin-eslint": "^3.3.0",
    "@vue/cli-service": "^3.3.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.5.21"
  }

你可以通过 npm 或 Yarn 调用这些 script：

npm run serve
# OR
yarn serve

关键点

main.js加载的配置在@vue/cli-service这个开发环境依赖包中，如下：

对应Vue 2.x中的webpack.base.conf中的配置。