vue项目中main.js和vue.config.js哪个文件先执行，执行顺序是怎样的？

最新推荐文章于 2024-05-17 17:50:07 发布
最新推荐文章于 2024-05-17 17:50:07 发布
阅读量925 收藏 9
点赞数 20
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70711237/article/details/135979403
版权

vue项目中index.html、main.js、和vue.config.js（webpack.config.js等配置文件）的执行加载顺序

为啥要知道这玩意儿？

在今天之前我也不知道他们三个是怎样的加载顺序，知道了我也没觉得有什么用，但是今天我遇到一个问题，项目的字体与之前项目不一样，很奇怪，但是我看了下引入的文件和cdn资源和之前引入的一样，没区别，但是就是字体不一样，后面去控制台发现是样式被覆盖了，要说改法，最简单的就是直接给html设置字体样式，但我还是纳闷，所以知道原因后写了这篇文章，让大家避免这种问题。

三者的执行顺序？

vue.config.js先于index.html，index.html先于main.js

判断依据

以下是系统的代码，从左到右分别为index.html、vue.config.js、main.js
在这里插入图片描述
从index.html代码中可以看到，它使用link标签引入了vue.config.js挂载的全局变量，所以，vue.config
.js的执行顺序肯定是要先于index.html的在这里插入图片描述
而在main.js文件中要挂载vue实例到id名为app的dom节点上，肯定要先初始化节点再进行挂载，所以index.html的执行顺序肯定是要先于main.js
在这里插入图片描述

小玛喽
关注
  • 20
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue.config.js中配置Vue的路径别名的方法
10-15
总结起来，通过`vue.config.js`中的`configureWebpack`和`resolve.alias`配置，我们可以有效地管理和优化Vue项目的路径引用，提升开发效率。在实际项目中，根据需求自由定制这些别名，可以使代码更加简洁易读，同时...
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
10-14
本文将深入探讨Vue.js项目中三个关键文件：main.js、App.vue和page/index.vue之间的区别。 首先，让我们从项目结构说起。一个标准的Vue.js项目通常有以下部分： 1. **index.html** - 这是项目的入口文件，它通常...
运行vue时，文件的执行顺序
黔肆的博客
05-17 385
vue基础-项目的文件执行顺序
vue项目的执行顺序，以及路由的使用方法
哎 你看的博客
05-01 820
vue项目的执行顺序、Vue Router、
vue项目访问顺序
热门推荐
ourLang
08-20 2万+
1.vue项目访问顺序 访问index.html后，main.js会将app.vue组件显示,会再通过进入router里的index.js从而进入hello.vue组件.进而展现整个页面。 2.mian.js(项目开始展示内容) import Vue from 'vue' import App from './App' //App.vue import router from './router...
Vue｜项目结构与执行过程介绍
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
07-24 4092
当执行了npm run serve 时，随后来到src目录找到main.js，引入vue，引入了App，接下来找到App.vue，发现里面用到了components下面的HelloWorld组件，对其进行执行，然后就到了index.html，通过容器进行渲染
vue项目中主要文件的加载顺序
handsome_man__的博客
11-24 1003
index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的export外的js代码。vue项目中主要文件的加载顺序。
vue中方法执行顺序问题
fanger0705的博客
03-20 954
了解原因VUE中的方法调用顺序是依次进行的，方法体内部也是依次执行的，但是，两个方法体的执行顺序并不能严格控制，不一定一个方法执行完再执行另一个。async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行，async 函数返回的是一个promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。
vue中main.js讲解
wssy_day的博客
03-18 9004
vue中main.js详情说明
vue微商城项目源码-vue-shop（适用于Node.js 10.x）.zip
06-06
- `main.js`：应用入口文件，初始化Vue实例和相关配置。 - `.babelrc`：Babel配置文件，用于转换ES6+语法到浏览器兼容的JavaScript。 - `.editorconfig`：代码风格配置。 - `.gitignore`：Git版本控制系统忽略的...
vue项目中,main.js,App.vue,index.html的调用方法
01-19
1、main.js是我们的入口文件，主要作用是初始化vue实例，并引入所需要的插件 2、App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router...
vue.config.js配置介绍
05-06
Vue CLI 是 Vue.js 开发的重要工具，它提供了一套便捷的命令行接口，用于快速搭建、构建和管理 Vue 项目。Vue CLI 3.x 引入了 `vue.config.js` 文件，这是一个用户自定义配置文件，允许开发者对构建流程进行个性化的...
vue项目中主要文件的加载顺序（index.html、App.vue、main.js）
u010141170的专栏
02-27 9293
先后顺序： index.html > App.vue的export外的js代码 > main.js >App.vue的export里面的js代码 > Index.vue的export外的js代码 测试的页面代码块： 文件的加载先后顺序： Index.vue的mounted()中的输出没有执行。why？ -------------...
VUE 程序的执行过程（非常非常重要）
Sayesan的专栏
09-04 1999
因此，可以说`index.html`文件是整个Vue应用程序的入口点，而`main.js`文件是Vue应用程序的入口文件。在浏览器加载和执行的过程中，`index.html`和`main.js`的先后顺序是先加载`index.html`，然后引入并执行`main.js`文件。6. `App.vue`文件作为Vue应用程序的根组件，被包含在`main.js`中创建的Vue实例中，并通过`new Vue({...}).$mount('#app')`语句挂载到指定的DOM元素上。文件是显式引入的，不需要在。
vue中文件加载顺序
Lucky_girl_wan的博客
02-20 5030
从加载顺序中可以看出main.js是先执行的，但出现（index.html>app.vue>main.js）问题是由ES6的模块化加载规则导致的。因为ES6是编译时加载且import命令具有提升效果，会提升到整个模块的头部，优先执行，故导致上述问题。ES6、CommonJs、AMD的加载规则。
【Vue.js】生命周期的执行顺序
Handsome_gir的博客
04-20 495
挂载(初始化相关属性)：beforeCreate、created、beforeMount、mounted 更新(元素或组件的变更操作)：beforeUpdate、updated 销毁(销毁相关属性)：beforeDestroy、destroyed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&...
前端笔记11——修改VUE CLI的入口文件main.js的路径（vue.config.js）
weixin_42844704的博客
05-04 5920
因为练习需要，VUE创建一个脚手架后，需要做很多不同的练习，不可能每一个小的练习都创建一个新的脚手架，所以就复制一份src文件夹，然后把原来做过的src改名。因为VUE CLI默认只识别src目录下的main.js。这样，问题就来了，每次都要改将之前该过名的目录改回src才能运行。 能不能不改文件的名称，VUE自动识别去运行自己想要的目录呢？ 在网上查了一些资料后，终于找到方法了，就是修改默认的入口文件路径，这个配置在哪里设置呢？答案在根目录下的vue.config.js配置文件上。 初始默认vue.con
【JavaScript】用了这么久的Vue，你还不知道Promise、nextTick、setTimeout的执行顺序？（涉及EventLoop，由浅入深）
weixin_42678675的博客
06-07 4178
1. 结论   执行顺序：同步代码 > nextTick > Promise> setTimeout   结论先行，如果你只需要答案，看到这一步即可   如果你想进一步了解为何会是这样的执行顺序，请你预留出20分钟的时间，我会带着你由浅入深来了解其背后的运行原理，其中涉及到的知识点有：异步、宏任务和微任务、Event Loop事件循环、JavaScript调用栈和任务队列，不了解这些知识点也没关系，我会用生活中最通俗易懂的例子来让你理解；观点会加上自己的理解，如果理解有误还请评论区指出，
需要在  vue.config.js  或  main.js  文件中修改模式vue.config.js：
最新发布
06-14
要在Vue应用中更改默认的模式（如开发模式和生产模式），你通常会修改`vue.config.js`文件。这是一个配置文件，允许你自定义构建过程的一些设置，包括环境变量。 **在`vue.config.js`中设置模式示例**[^4]： ```javascript // vue.config.js module.exports = { // 指定构建环境，如开发（production）或测试（test） env: { production: process.env.NODE_ENV === 'production', development: process.env.NODE_ENV !== 'production' }, // 根据环境设置配置 configureWebpack: { // 对开发和生产环境进行不同的配置 rules: { // 在这里添加或修改针对不同模式的规则 // 例如，你可以在这里设置开发时的源地图 devtool: env.production ? undefined : 'source-map' } } } ``` 在这个例子中，我们检查`process.env.NODE_ENV`环境变量来决定是生产模式还是开发模式。如果环境变量为`'production'`，则设置为生产模式，否则为开发模式。 **在`main.js`中设置模式的情况较少见，因为这通常是配置应用本身的行为而不是构建过程。然而，如果你有一个自定义的脚手架或者想要在应用启动时动态设置模式，可能会在`main.js`中做类似的操作**[^5]： ```javascript // main.js (假设你有一个全局变量控制模式) const isProduction = true; // 更改这个值来切换模式 Vue.config.mode = isProduction ? 'production' : 'development'; ``` 请注意，`main.js`通常用于初始化应用实例和挂载视图，而不是配置构建过程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值