共计 1636 个字符，预计需要花费 5 分钟才能阅读完成。
自己在前端的开发中主要使用 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 配置项这部分的配置项内容上面已经提到，剩下的一部分配置项都是起到什么作用，等我慢慢更新
如果文章中有不正确的地方还希望各位大佬不吝执教，在此谢过
