vue package.json 脚本使用

101 阅读 0 评论 67 点赞

我是靠谱客的博主完美毛巾，这篇文章主要介绍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内容请搜索靠谱客的其他文章。

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

本文分类：vue
浏览次数：101 次浏览
发布日期：2023-10-27 02:15:44
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_o_22_f5_14__23__26_3.html

vue package.json 脚本使用

一、package.json scripts 脚本是什么

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

三、前端多环境配置方法

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

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

方案三：使用cross-env插件

最后

评论列表共有 0 条评论

发表评论取消回复

vue package.json 脚本使用

一、package.json scripts 脚本是什么

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

三、前端多环境配置方法

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

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

方案三：使用cross-env插件

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

发表评论取消回复