vue package.json 脚本使用

一、package.json scripts 脚本是什么

npm 允许在package.json文件里面，使用scripts字段定义脚本命令。在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
    "build-node": "node build.js"
  }
}

命令行下使用npm run命令，就可以执行这段脚本。

$ npm run build-node
# 等同于
$ node build.js

二、前端工程化并行方案实现

以上配置的项目我们可以通过npm run serve来运行我们的web工程（这里是起了一个本地服务），并可以在浏览器访问该服务。如果我们项目不只有一个web服务，我们还需要一个mock接口模拟服务（用来模拟后端接口返回数据），我们可以做如下配置：

// package.json，concurrently（同时）
"scripts": {
    "serve": "concurrently \"npm:mock\" \"vue-cli-service serve\"" // 使用concurrently解决方案，这里需要注意转义符的使用
    "mock": "cd mock && ts-node-dev mock-server.ts"
}

当我们运行npm run serve的时候两个服务都会在同一个Terminal中运行，并且只需要在当前Terminal通过一次Ctrl+C就能结束两个服务。这就是并行前端工程。其中Concurrently是一个需要额外安装的插件

npm install concurrently --save

三、前端多环境配置方法

开发应用时环境有开发环境、测试环境、生产环境等,此时我们需要配置不同的环境,获取不同服务地址公共前缀。

方案一：使用Vue-cli-service环境变量进行分环境打包；开发环境 , 继续使用proxy代理 ;

首先 , 我们需要添加各个环境的env配置文件 , 放在项目的根目录下

我们以联调环境为例 , 添加了一个.env.build_dev 文件

VUE_APP_TYPE = 'jiayou'
NODE_ENV='production' //表明这是需要编译的环境(需要打包)
VUE_APP_CURRENTMODE='production' // 自定义的模式信息
VUE_APP_BASE_SERVER='http://****:8080' // 自定义的接口地址

在接口管理api.js文件中

// 分环境打包
let baseUrl = '';
if (process.env.NODE_ENV == 'development') {
  baseUrl = "/base"
} else if (process.env.NODE_ENV == 'production') {
  baseUrl = process.env.VUE_APP_BASE_SERVER
} else {
  baseUrl = ""
}

package.json

"scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "build_dev": "vue-cli-service build --mode build_dev",
        "build_pre_release": "vue-cli-service build --mode build_pre_release",
        "build_test": "vue-cli-service build --mode build_test",
        "lint": "vue-cli-service lint"
    },

方案二：将前端请求的服务地址抽离出来 , 放进配置文件里面 ,开发环境 , 继续使用proxy代理 ;

这样的好处如下:
1: 前端不需要重复进行打包编译 ;
2: 自动化部署的时候可以使用脚本去替换前端资源中的配置文件 ;
3: 如果采用前端Docker化 , 可以在制作镜像的过程中修改/替换配置文件 ;

1.首先 , 我们将config.json文件放置在public文件夹中(防止被webpack编译)
2.在里面我们简单存放一个服务地址字段

config.json
{
  "SERVER_URL": ""
}

3.接下来,需要保证项目开始加载前 , 我们已经获取到这个配置文件了 , 所以在main.js 里面 , 我们需要先获取这个配置文件 , 再实例化vue
main.js

import axios from 'axios'
// vue实例
function createdVue () {
  return new Vue({
    router,
    store,
    render: h => h(App)
    }).$mount("#app");
}
if (process.env.NODE_ENV == 'development') {
    // 放在public文件夹下的静态文件需要通过绝对路径去获取
    axios.get('/config.json').then(res=>{
      // 开发环境通过proxy代理的形式 , 不需要获取配置地址
      Vue.prototype.SERVER_URL = ''
      createdVue()
    })
} else if (process.env.NODE_ENV == 'production') {
    // 放在public文件夹下的静态文件需要通过绝对路径去获取
    axios.get('/config.json').then(res=>{
      // 将获取到的配置文件作为全局变量保存
      Vue.prototype.SERVER_URL = res.SERVER_URL
      // 成功获取到配置后再去创建vue实例
      createdVue()
    })
  } 

4.一般项目中 , 我们都会对axios进行统一封装 , 为axios创建一个config.js 文件 , 里面对axios请求头 , baseUrl , 请求拦截 , 各种请求方式进行配置。在这里我们为每个请求添加baseUrl。

// 获取全局变量中的服务地址
function getBaseUrl () {
  return Vue.prototype.SERVER_URL
}
// 添加请求拦截器
axios.interceptors.request.use((config) => {
  // 为每次请求添加baseUrl  
  config.baseURL = getBaseUrl()
  if (sessionStorage.token) {
    config.headers['Authorization'] = sessionStorage.token
  }
  return config
}, (error) => {
  return Promise.reject(error)
})

方案三：使用cross-env插件

cross-env是跨平台设置和使用环境变量的脚本。

npm install cross-env --save-dev