Web前端最全Vue-cli3(4)，面试知识及准备

最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》

3.1 运行 yarn build:env1

在任意 JS 脚本中获取环境变量：

3.2 运行 yarn build:env2

在任意 JS 脚本中获取环境变量：

3.3 运行 yarn build:env3

在任意 JS 脚本中获取环境变量：

四、不同环境变量的使用示例

// 项目中 axios 请求的封装

import axios from 'axios'
const env = process.env.NODE\_ENV;

const request = axios.create({
  withCredentials: false
});
request.interceptors.request.use(config => {
  // ...
  switch(env) {
    case 'env1':
      // ...
      break;
    case 'env2':
      // ...
      break;
    case 'env3':
      // ...
      break;
  }
  return config;
});
export default function ajax() {
  return new Promise(() => {
    request().
    then().
    catch()
  });
}

五、配置除默认变量以外的变量

process.env.NODE_ENV 是 Node 配置的默认变量，如果项目中需要更多这样的变量来适配不同环境，需要做配置。直接设置在 scripts 中是不生效的。

比如直接书写

"scripts": {
  "serve": "vue-cli-service serve",
  "build:test": "cross-env NODE\_ENV=env1 CLIENT\_NAME=zs URL=http://www.xxx.url vue-cli-service build"
}

在上面的配置中，除了配置了 NODE_ENV 之外，还配置了 CLIENT_NAME 和 URL，我们可以在任意 JS 脚本中获取，拿到的都是 undifined：

所以，要使用更多的变量，需要在 vue.config.js 中做以下配置：

const webpack = require('webpack');
module.exports = {
  publicPath: './',
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          // 如果需要更多的变量，那就在这里添加更多的键值对
          URL: JSON.stringify(process.env.URL),
          CLIENT\_NAME: JSON.stringify(process.env.CLIENT\_NAME)
        }
      })
    ]
  }
};

然后更改 package.json 中命令：

"scripts": {
  "serve": "vue-cli-service serve",
  "build:env1": "cross-env NODE\_ENV=env1 CLIENT\_NAME=zs URL=http://www.xxx.url1 vue-cli-service build",
  "build:env2": "cross-env NODE\_ENV=env2 CLIENT\_NAME=ls URL=http://www.xxx.url2 vue-cli-service build",
  "build:env3": "cross-env NODE\_ENV=env3 CLIENT\_NAME=ww URL=http://www.xxx.url3 vue-cli-service build"
}

#### 总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。



万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

![](https://img-blog.csdnimg.cn/img_convert/621960a57eb42479e02d6d64c0c81891.png)



![](https://img-blog.csdnimg.cn/img_convert/5230c48fd0fcb265f3401a21603bda2b.png)



**前端面试题汇总**

![](https://img-blog.csdnimg.cn/img_convert/42728594459506983a38ca2b86545fc6.png)

mg-blog.csdnimg.cn/img_convert/5230c48fd0fcb265f3401a21603bda2b.png)



**前端面试题汇总**

![](https://img-blog.csdnimg.cn/img_convert/42728594459506983a38ca2b86545fc6.png)