小白也能弄明白vue项目的启动、打包等基本配置

这是我参与 8 月更文挑战的第 2 天，活动详情查看： 8月更文挑战

现在的前端工程都走模块化的风格，不像之前前端给html页面给后台人员，后台人员双击就能在浏览器打开查看效果。

现在的后台人员面对前台交付的vue文件，一脸懵逼， 我想改个接口地址。。。我想启动下项目。。。我想打包下项目。。。 我到底要怎么办！！ლ(′◉❥◉｀ლ)

step 1： 本地需要先配置node、npm环境

现在的项目都需要配置node环境才能运行起来，所以拉到项目后的第一步：配置node环境，去node官网下载稳定版本（LTS),一步一步傻瓜式安装。

安装完成后，win+R 快捷键打开cmd命令窗口，执行以下命令，如果均有具体的版本号返回，则说明node、npm配置成功

node -v

// v12.22.3

npm -v

//7.19.1

复制代码

step2: 进入项目文件夹，安装依赖

首先cmd命令窗口中 cd 具体项目路径进入到项目文件夹，npm install安装好对应的依赖，才能启动起来项目

// 例如项目我们放在 D:/test文件夹下面,则在cmd命令窗口执行以下命令

d: //进入d盘

cd d:\test // 进入d盘下的test文件夹

npm install // 安装项目所需依赖

复制代码

淘宝镜像

npm来安装包使用的是国外的地址，经常会出现超时错误，可以通过修改为国内的淘宝源来加速安装。

//安装淘宝的cnpm，然后在使用时直接将npm命令替换成cnpm命令即可

npm install -g cnpm --registry=https://registry.npm.taobao.org

//然后安装时使用如下命令

cnpm install express

复制代码

如何执行启动、打包等命令

vue-cli（3.x版本） 搭建的项目安装好依赖，如何启动项目？如何打包线上代码呢？

打开根目录下面的package.json

"scripts": {

    "serve": "vue-cli-service serve",

    "build": "vue-cli-service build",

    "lint": "vue-cli-service lint",

    "test": "vue-cli-service build --mode test",

    "publish": "vue-cli-service build && vue-cli-service build --mode test"

}

复制代码

若package.json中的scripts如上所配置，则：

• 本地运行项目执行：npm run serve

• 提交打包前的代码检查执行 npm run lint

• 生成线上正式环境打包代码执行 npm run build

• 生成线上测试环境打包代码执行 npm run test

• 一次性生成 线上正式+测试环境打包代码执行 npm run publish

线上有多种环境（如测试环境+生产环境） 怎么办？

在根目录下面新建下面3个文件：

.env.development

//本地环境
NODE_ENV = 'development'
VUE_APP_BASE_URL='http://local.api.com'
复制代码

.env.production

//线上-生产环境
NODE_ENV = 'production'
VUE_APP_BASE_URL='http://www.api.com'
复制代码

.env.test

//线上-测试环境
NODE_ENV = 'production'
VUE_APP_BASE_URL='http://test.api.com'
复制代码

• npm run serve时会把process.env.NODE_ENV设置为development

• npm run build时会把process.env.NODE_ENV设置为production

根据process.env.NODE_ENV设置不同的请求urlVUE_APP_BASE_URL就可以简单区分本地和线上环境

如果线上有多种环境，则用--mode 来区分，如上所示：

//引用的是.env.test文件里面的配置

"test": "vue-cli-service build --mode test"

复制代码