Vue项目中main.js作用、内容规范及app.xxx.js生成逻辑相关咨询

你执行的npm run serve实际是调用项目内依赖的vue-cli-service serve命令，本质是启动一个基于webpack的前端开发构建服务，和PHP服务端运行的逻辑有本质区别，以下是对应问题的解答：

1. main.js的作用与执行逻辑 #

main.js是Vue CLI项目的默认入口文件，会被完全打包进浏览器加载的JS文件中，同时是打包后代码的执行入口，浏览器加载完JS文件后会优先执行从main.js转换而来的代码。

2. app.哈希串.js的生成规则 #

你在浏览器中看到的带哈希后缀的app.js是webpack打包后的产物，生成流程如下：

• 打包流程从入口main.js启动，递归解析所有依赖的资源：包括JS、Vue单文件组件、CSS、图片、字体等
• 对不同类型的资源做对应转换：比如ES6+语法转成浏览器兼容的ES5、Vue单文件组件拆解为渲染函数/样式/JS逻辑、CSS自动补全浏览器前缀
• 所有JS逻辑（含第三方依赖、业务代码）合并处理后生成最终的JS文件，文件名后的哈希串由文件内容生成，内容变更时哈希会同步更新，用于避免浏览器缓存旧版本资源
• 开发环境下npm run serve启动的服务会把打包产物存在内存中，不会写入本地磁盘，执行npm run build打包生产环境代码时才会将产物写入本地dist目录

3. 示例代码的打包输出结果 #

你给出的三行main.js代码打包后的处理逻辑如下：

• import './css/icon.css'：不会作为普通JS逻辑执行，webpack的CSS处理loader会读取icon.css的内容，开发环境默认插入到HTML的style标签中，生产环境默认单独打包为独立CSS文件
• Vue.use(VueResource)、Vue.use(VueScrollTo)：会被转译为浏览器兼容的ES5语法，原有逻辑完全保留，浏览器运行时会正常执行，完成对应Vue插件的注册

和PHP运行逻辑的差异 #

PHP属于服务端运行的语言，浏览器发起请求时PHP在服务端执行生成HTML返回给浏览器，核心逻辑运行在服务端。Vue CLI的运行逻辑属于前端构建+客户端运行的模式，代码在构建阶段就编译为静态资源，服务端仅负责返回静态资源和接口数据，所有页面逻辑都在用户的浏览器侧运行。

内容的提问来源于stack exchange，提问作者Nicolas Bourdon