前端环境

nodejs默认环境有两个:development和production，你会发现在真实项目中，只有这两个环境是完全不够的。

笔者认为前端的项目都应该有以下五个环境:

本地环境（local,用于本地开发，连接本地api）
开发环境（dev,用于本地开发，连接开发环境的api）
测试环境（sit，测试人员测试）
预发布环境（pre, 真实的数据，最真实的生产环境）
生产环境（prod, 生产环境）

具体讲解

local环境

很少有项目关注这个环境，希望能仔细阅读，会对你有很大的帮助

有那么两群人：
1 纯前端，不会后端，但在对接api的时候，喜欢把后端代码pull下来，在本地运行，然后连接本地的api.
2 全栈开发者，他们即开发前端页面，又写后端api接口

讲到这里相信大家应该都懂了local的环境的样子了，就是连接的本地的api地址

local环境配置文件：
.env.local文件

NODE_ENV=development
VUE_APP_TYPE=dev
VUE_APP_URL=http://127.0.0.1:10086/smart-admin-api/
VUE_APP_SOCKET_URL=ws://127.0.0.1:10086/smart-admin-api/

启动：
npm run local

dev环境

有一群前端开发者，愿意像上面那两种人麻烦，他们坐等后端的api接口，那么就只能连接后端dev环境的地址了，所以有了：

dev环境配置文件：
.env.dev文件

NODE_ENV=development
VUE_APP_TYPE=dev
VUE_APP_URL=http://172.16.0.145:10086/smart-admin-api/
VUE_APP_SOCKET_URL=ws://172.16.0.145:10086/smart-admin-api/

启动
npm run dev

sit,pre,prod环境

测试、预发布、生产环境，这三个环境不多说了，大家都懂的
package.json

"scripts": {
    "local": "vue-cli-service serve --open --mode local",
    "dev": "vue-cli-service serve --open --mode dev",
    "sit": "vue-cli-service build --mode sit",
    "pre": "vue-cli-service build --mode pre",
    "prod": "vue-cli-service build --mode prod"
  },

CLI命令

• vue-cli-service serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载

• vue-cli-service build 会在 dist/ 目录产生一个可用于生产环境的包，带有 JS/CSS/HTML 的压缩，和为更好的缓存而做的自动的 vendor chunk splitting,它的 chunk manifest 会内联在 HTML 里。

具体：
CLI 服务

打生成包

打包命令，直接执行
npm run prod
真正执行的是配置的vue-cli-service build 会自动打包，打包成功会生成dist目录

image.png

dist打包后的项目需要运行在服务器环境中

搭建express本地服务器

1、安装express-generator生成器

npm install express-generator -g

2、创建一个express项目 名称自定义（projectVueLittlePig）

express projectVueLittlePig

3、进入项目目录

cd projectVueLittlePig 

4、安装相关项目依赖

npm install

5、将dist文件夹下的所有文件复制到projectVueLittlePig项目的public文件夹下面

image.png

6、启动express项目

npm start    // 启动项目

7、浏览器打开页面

输入 http://localhost:3000 即可运行