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.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中的配置。
更多推荐
所有评论(0)