我是靠谱客的博主 完美毛巾,这篇文章主要介绍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 访问这个命令。

复制代码
1
2
3
4
5
6
7
8
{ "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" "build-node": "node build.js" } }

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

复制代码
1
2
3
4
$ npm run build-node # 等同于 $ node build.js

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

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

复制代码
1
2
3
4
5
6
// 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是一个需要额外安装的插件

复制代码
1
2
npm install concurrently --save

三、前端多环境配置方法

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

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

首先 , 我们需要添加各个环境的env配置文件 , 放在项目的根目录下
在这里插入图片描述
我们以联调环境为例 , 添加了一个.env.build_dev 文件

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

在接口管理api.js文件中

复制代码
1
2
3
4
5
6
7
8
9
10
// 分环境打包 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

复制代码
1
2
3
4
5
6
7
8
9
"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.在里面我们简单存放一个服务地址字段

复制代码
1
2
3
4
5
config.json { "SERVER_URL": "" }

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

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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。

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 获取全局变量中的服务地址 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是跨平台设置和使用环境变量的脚本。

复制代码
1
2
npm install cross-env --save-dev

最后

以上就是完美毛巾最近收集整理的关于vue package.json 脚本使用的全部内容,更多相关vue内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(67)

评论列表共有 0 条评论

立即
投稿
返回
顶部