在校企合作项目中的几个发现

小研睡不醒

已于 2022-10-15 22:21:08 修改

阅读量237

点赞数 2

分类专栏：感悟文章标签： vue.js javascript 前端

于 2022-10-15 22:11:52 首次发布

本文链接：https://blog.csdn.net/fps_ll/article/details/127341499

版权

感悟专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近在有了一个校企合作,分配的任务,发现公司的任务分配,确实要比我们自己做的时候严谨,项目经理，项目负责人,ui,前后端，在工作之前还需要写待办，去按照目标去完成。

在开始之前,要做任务准备,我们在腾讯会议上,他们说了一下项目的需求。然后我被分配到写手机端，用uniapp写h5+安卓。

在这之前我一直以为h5+安卓，是用h5写，然后最后加个应用壳。为此我还重复问了好几次，可能学小程序的时候遗忘了，最后在网上看过之后，发现原来uniapp能直接生成多端应用。确实说我有点片面，接触的不是太深。这次终于是清楚了，而且用HBuilder写uniapp很方便快捷。

但是其中有几个发现。

发现一：yarn install

昨天项目经理好像把手机端的代码上传到CODING |一站式软件研发管理平台。

当我去拉取之后，准备去安装依赖的时候，出现了一些问题，平时都是npm install去安装依赖，但是却出现了问题，报的全是这些错，而且没有安装成功依赖。

报错，去网上去搜但是却没有得到解决方法。但是我以为是我的操作问题，我删了重新拉，还是不行。后来我把package-lock.json文件删除，安装上node_moudles,但是启动之后还是有包没有安装上，启动报错。到最后，我用cnpm i安装，也是没有成功。

最后，发现yarn install却能直接安装成功，而且不报错启动。

发现二：配置开发环境，测试环境，生成环境

刚开始我不知道怎么去配置开发环境，测试环境，生成环境。后来看到一个博客讲的挺清楚的，我来复述一下。

第一步：在项目的根目录去创建三个文件。

这样在启动项目时使用不同命令后通过 process.env.NODE_ENV 就可以判断当前处于什么环境，process.env可直接使用，无需引入

.env.development

# 开发环境
NODE_ENV = 'development'
 
# 开发环境，api前缀
VUE_APP_BASE_API = ''
 
# 开发环境，Url地址
VUE_APP_BASE_URL = 'http://192.168.xxx'

.env.test

# 测试环境
NODE_ENV = 'test'
 
# 测试环境，api前缀
VUE_APP_BASE_API = ''
 
#测试环境，Url地址
VUE_APP_BASE_URL = 'http://xxx'

.env.production


# 生产环境
NODE_ENV = 'production'
 
# 生产环境，api前缀
VUE_APP_BASE_API = '/api'
 
# 生产环境，Url地址
VUE_APP_BASE_URL = 'http://xxx'

第二步：配置不同环境变量可避免切换不同环境时手动修改项目配置，请求url等，vue项目中可先在package.json文件中这样设置：

"scripts": {
    "dev": "vue-cli-service serve --mode development",  //开发环境
    "dev:test": "vue-cli-service serve --mode test",    //测试环境
    "build:test": "vue-cli-service build --mode test",
    "build": "vue-cli-service build --mode production", //生产环境
  },

第三步：一般我们使用axios去请求接口，所以可以让它根据环境请求不同域名下的接口。

axios.defaults.baseURL = process.env.VUE_APP_API_URL

但是我这次uniapp是用的**@escook/request-miniprogram** 网络请求包

//从网络请求包中引入$http请求对象
import { $http } from "@escook/request-miniprogram";

//配置网络请求基础地址，因为uni.$http为$http的引用，所以可以直接修改$http对象下的属性
**$http.baseUrl = process.env.VUE_APP_BASE_URL;**
 //配置发起网络请求前的拦截功能
$http.beforeRequest = function () {
  uni.showLoading({
    title: "加载中...",
  });
};
//配置网络请求完毕后的拦截功能
$http.afterRequest = function () {
  uni.hideLoading();
};

export default $http