摘要:自己在前端的开发中主要使用的框架,今天的这篇文章比较基础,我之前在刚刚接触项目的时候并没有思考过关于项目是究竟怎么运行起来的,只知道项目就跑起来了,究竟我在输入这行命令之后项目是怎么运行的,分别走了哪几步,怎么样才走到生产环境,什么情况下又
自己在前端的开发中主要使用vue.js的框架,今天的这篇文章比较基础,我之前在刚刚接触vue项目的时候并没有思考过关于项目是究竟怎么运行起来的,只知道npm start/npm run dev项目就跑起来了,究竟我在输入这行命令之后项目是怎么运行的,分别走了哪几步,怎么样才走到生产环境,什么情况下又运行了开发环境,然后还有一个test测试环境。我写下这篇文章的时候对这一部分了解了一些,但自我感觉并不是非常透彻,所以当作一个未完成的任务,文章还会持续的更新
在写这篇文章的之前我也查阅了好多大神的博客,内容有引用,文章末尾会表明所引文章的出处
首先先说一下创建vue项目的流程(以vue-cli2来举例):
1、npm install vue-cli -g //-g是全局安装,只要不是重装系统,只安装一次就可以
2、npm init webpack 项目名称 //这一步依靠webpack来创建一个项目
3、npm install //安装相关依赖
4、npm run dev/npm start //运行项目
对于第四点,为什么有两个选择,这要看你创建好项目之后的package.json这个文件,文件中有scripts对象,对象中可以看到有start属性和dev属性。当执行了npm start命令,也就等同于执行了npm run dev这个命令,而这个命令,就是执行了开发环境
在dev这个对象的值中可以看到,命令最终走到了build文件夹下的webpack.dev.conf.js这个文件里,找到这个文件
打开这个文件可以看到有devServe的对象,对象属性中有主机名,端口号,还有publicPath和配置的反向代理。这些属性的属性值都是以config.dev开头的。而config又是引入的config文件夹下的index.js
点开index.js文件
在文件中找到dev的配置项
在配置项中可以看到有下面几项
assetsSubDirectory //除了index.html之外的静态资源要存放的路径
assetsPublicPath //代表打包后,index.html里引用资源的相对地址
proxyTable //在这个里面可以配置反向代理
host //主机名
port //端口号
autoOpenBrowser //是否自动打开浏览器
顺便说一下这个文件中下面的build配置项
index:path.resolve(__dirname, "../dist/index.html") //模板
assetsRoot: path.resolve(__dirname, "../dist") //打包后文件要存放的路径,一般为dist
assetsSubDirectory:"static" //把所有的静态文件打包到dist文件下的static文件内
assetsPublicPath:"/" //代表生成的index.html文件,里面引入资源时,路径前面要加上 / (本人感觉还是挺重要的,要记住)
再插一句,我现在是用的vue-cli2搭建的项目,如果是vue-cli3搭建的话assetsPublicPath的配置内容就换位置咯,属性名都换了=>vue.config.js中的publicPath的属性下配置
这样开发环境的相关流程就走完了,接下来是三大环境中剩下的生产环境
首先,生产环境是怎么来的,也就是说,我执行怎样的语句或者命令,项目就认为我是一个生产环境,没错,这个命令就是 npm run build,执行这个语句的动作就是打包项目
首先看图说话
执行命令之后就走build文件夹下的build.js文件,打开build.js,看到下图
说明一下:
build文件夹下的webpack.prod.conf.js文件里面是对生产环境做的一些环境配置
另外看一下config文件夹下的index.js文件内的build配置项这部分的配置项内容上面已经提到,剩下的一部分配置项都是起到什么作用,等我慢慢更新
如果文章中有不正确的地方还希望各位大佬不吝执教,在此谢过
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/110255.html
摘要:在回调队列中,函数等待调用栈为空,因为每个语句都执行一次。最后一个运行,并且从调用栈中弹出。它将回调以先进先出顺序移动到调用栈并执行。 翻译:疯狂的技术宅原文: https://medium.freecodecamp.o... 本文首发微信公众号:前端先锋欢迎关注,每天都给你推送新鲜的前端技术文章 Node.js 是一个 JavaScript 运行时环境。听起来还不错,不过这究竟...
摘要:究竟是什么是一个运行时环境。对此请求的响应需要时间,但两个用户数据请求可以独立并同时执行。所以这会使不太适合多线程任务。这种非阻塞消除了多线程的需要,因为服务器可以同时处理多个请求。该事件将等待毫秒,然后回调函数。系统事件来自库的核心。 Node.js究竟是什么? Node.js是一个JavaScript运行时环境。听起来不错,但这是什么意思?这是如何运作的? Node运行时环境包含执...
摘要:究竟是什么是一个运行时环境。对此请求的响应需要时间,但两个用户数据请求可以独立并同时执行。所以这会使不太适合多线程任务。这种非阻塞消除了多线程的需要,因为服务器可以同时处理多个请求。该事件将等待毫秒,然后回调函数。系统事件来自库的核心。 Node.js究竟是什么? Node.js是一个JavaScript运行时环境。听起来不错,但这是什么意思?这是如何运作的? Node运行时环境包含执...
阅读 2684·2021-11-19 11:35
阅读 2520·2021-11-02 14:40
阅读 1332·2021-09-04 16:48
阅读 2952·2019-08-30 15:55
阅读 1648·2019-08-30 13:11
阅读 1894·2019-08-29 11:12
阅读 1033·2019-08-27 10:52
阅读 3093·2019-08-26 18:36