vue package.json 脚本使用_七里长亭不负卿_package.json 脚本

网络投稿 02-07 6720

一、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