笔试题

在页面的固定区域内实现图片的展示(使用原生代码实现,不可使 用任何框架 )。img

  1. 每点击一次右箭头,图片区域向左滚动出一张图片,反之相同 2. 当发现图片滚动到末尾时,响应的箭头变成不可点击状态 3. 鼠标在图片区域内滑动滚轮,图片会随着鼠标滚轮的方向进行响应的滚动 。

export default与export的区别

export default与export的区别
  1. export与export default均可用于导出常量,函数,文件,模块等。
  2. 在一个文件或模块中,export,import可以有多个,export default只能有有一个。
  3. 通过export方式导出,在导入时要加上{},export default则不需要。
  4. 输出单个值,可使用export default。输出多个值时,要使用export,两个不要同时使用。

module.export

module.exports对象是由模块系统创建的,在我们自己写模块时,需要在模块最后写好模块接口,声明这个模块对外暴露什么内容。module.exports提供了暴露接口的方法。

  1. 返回JSON Object

    1
    2
    3
    4
    5
    6
    7
    8
    var app = {
    name: 'app',
    version: '1.0.0',
    sayName: function(name){
    console.log(this.name);
    }
    }
    module.exports = app;

    这种方法可以返回全局共享的变量或者方法。
    调用方法:

    1
    2
    var app = require('./app.js');
    app.sayName('hello');//hello

    或者可这么用

    1
    exports.function1 = function(){}

    导入方法

    1
    2
    var functions = require('./function.js');
    functions.function1()
  2. 返回一个构造函数

    1
    2
    3
    4
    5
    // class类
    var CLASS = function(args){
    this.args = args;
    }
    module.exports = CLASS;

    调用方式:

    1
    2
    var CLASS = require('./class.js');
    var c = new CLASS('arguments');
  3. 返回一个实例对象

    1
    2
    3
    4
    5
    6
    7
    8
    // CLASS.js
    var CLASS = function(){
    this.name = 'class';
    }
    CLASS.prototype.func = function(){
    alert(this.name);
    }
    module.exports = new CLASS();

    调用方式:

    1
    2
    var c = require('./CALSS.js');
    c.func(); //'class'

项目所得

用户行为分析系统

vue-cli关闭eslint
  1. vue.config.js文件中将以下三项设置为false

    1
    2
    3
    4
    5
    6
    7
    "devServer": {
    "overlay": {
    "warnings": false,
    "errors": false
    },
    }
    "lintOnSave": false
  2. package.json文件中关闭eslint

    直接注释掉package.json文件中eslint的配置就可以了(以下是vue-cli的默认配置)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    "eslintConfig": {
    "root": true,////此项是用来告诉eslint找当前配置文件不能往父级查找
    "env": {
    "node": true//此项指定环境的全局变量,下面的配置指定为node环境
    },
    "extends": [// 此项是用来配置vue.js风格,就是说写代码的时候要规范的写,如果你使用vs-code我觉得应该可以避免出错
    "plugin:vue/essential",
    "@vue/standard"
    ],
    "rules": {//规则配置写在这里
    "indent": [1, 4]
    },
    "parserOptions": {
    "parser": "babel-eslint"//此项是用来指定eslint解析器的,解析器必须符合规则,babel-eslint解析器是对babel解析器的包装使其与ESLint解析
    }
    },

支付宝小程序之旅

acss样式文件

page元素为框架支持的特殊选择器,会匹配框架提供的页面根节点容器。

js逻辑文件

通过const app = getApp()可获取全局app实例。

项目中的业务需求

格式化时间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const formatTime = date => {
const year = date.getFullYear();
const month = date.getMonth()+1;
const day = date.getDate();
const hour = date.getHours();
const minute = date.getMinutes();
const second = date.getSeconds();
return [year,month,day].map(foramtNumber).join('/')+ ' '+[hour,minute,second].map(formatNumber).join(':');
}

//不超过10的月日时分秒就在前面加上0
const formatNumber = n => {
n = n.toString()
return n[1] ? n : '0' + n
}

时间戳

1
let timeStamp = new Date().getTime();

将参数转为地址传参

1
2
3
4
5
6
7
8
9
// 把参数变为地址传参
const transformUrlData(obj) {
let str = ''
for (let k in obj) {
str += k + '=' + obj[k] + '&'
}
str = str.substring(0, str.length - 1)
return str
},

getCurrentPages()的使用

getCurrentPages()函数用于获取当前页面栈的实例,以数组的形式按栈的顺序给出1,第一个元素为首页,最后一个元素为当前页面。

注意:

  1. 不要尝试改变页面栈,会导致路由以及页面状态错误。
  2. 不要在App.onLaunch的时候调用getCurrentPages(),此时pages还没有生成。
常用场景
  1. 利用页面栈的长度

如:进入小程序非默认首页时,需提供返回首页按钮或者执行其他事件。

1
2
3
4
onShow(){
let pages = getCurrentPages(); //当前页面栈
if(pages.length == 1){}
}
  1. 跨页面赋值
1
2
3
4
5
let pages = getCurrentPages();
let prevPage = pages[pages.length - 2]; //上一个页面
prevPage.setData({
//直接给上一页面赋值
});
  1. 页面跳转后自动刷新
1
2
3
4
5
6
7
8
wx.switchTab({
url: '../index/index',
success: function (e) {
var page = getCurrentPages().pop(); //当前页面
if (page == undefined || page == null) return;
page.onLoad(); //或者其它操作
}
})
  1. 获取当前页面相关信息
1
2
3
4
5
6
7
8
let pages = getCurrentPages(); //当前页面栈
//当前页面为页面栈的最后一个元素
let prevPage = pages[pages.length - 1];//当前页面
or
// pop() 方法用于删除并返回数组的最后一个元素
let prevPage = pages.pop();//当前页面

console.log( prevPage.route) //举例:输出为‘pages/index/index’

埋点

埋点分析,是网站分析的一种常用的数据采集方法。数据埋点是一种良好的私有化部署数据采集方式。数据埋点分为初级、中级、高级三种方式,分别为:

初级:在产品、服务转化关键点植入统计代码,据其独立ID确保数据采集不重复(如购买按钮点击率);

中级:植入多段代码,追踪用户在平台每个界面上的系列行为,事件之间相互独立(如打开商品详情页——选择商品型号——加入购物车——下订单——购买完成);

高级:联合公司工程、ETL采集分析用户全量行为,建立用户画像,还原用户行为模型,作为产品分析、优化的基础。

无疑,数据埋点是一种良好的私有化部署数据采集方式。数据采集准确,满足了企业去粗取精,实现产品、服务快速优化迭代的需求。

但,因手动埋点工程量极大,且一不小心容易出错,成为很多工程师的痛。且其开发周期长,耗时费力,很多规模较小的公司并不具备自己埋点的能力。无埋点成为市场新宠。最后埋点、无埋点两种技术谁能成为最后赢家,我们拭目以待。

runtime-compiler和runtime-only的区别

runtime-compiler时:当我们将template模板传给vue的时候,vue会做一个保存,就是将该模板保存到vue实例上的options上,保存后将template解析(parse)成抽象语法树(abstract syntax tree,即ast),再将ast转成render函数后再生成虚拟DOM树,最后转成真实的UI。template——> ast ——> render——> vdom ——> UI。

runtime-only:render——> vdom ——> UI,这样这种方式的性能更高,代码量较少。

js中的Blod对象

Blob对象

blob对象介绍

一个Blob对象表示一个不可变的,原始数据的类似文件对象。Blob表示数据不一定是一个JavaScript原生格式,blob对象本质上是js中的一个对象,里面可以存储大量的二进制编码格式的数据。File接口基于Blob,继承了blob的功能并将其扩展使其支持用户系统上的文件

创建blob对象

创建blob对象本质上和创建一个其他对象没啥区别,都是通过构造函数Blob(任意格式的数据序列,包含两个属性的对象)来创建。

包含两个属性的对象{type:MIME的类型,endings:决定第一个参数的数据格式,可取值为“transparent”(不变,是默认值)或者“native”(native的话按操作做系统转换)。}

1
2
3
var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)],
{type : 'application/json'});

既然是对象,那么blob也拥有自己的属性以及方法

属性

  • Blob.isClosed (只读)

    布尔值,指示 Blob.close() 是否在该对象上调用过。 关闭的 blob 对象不可读。

  • Blob.size (只读)

    Blob 对象中所包含数据的大小(字节)。

  • Blob.type (只读)

    一个字符串,表明该Blob对象所包含数据的MIME类型。如果类型未知,则该值为空字符串。

方法

  • Blob.close()

    关闭 Blob 对象,以便能释放底层资源。

  • Blob.slice([start[, end[, contentType]]])

    返回一个新的 Blob 对象,包含了源 Blob 对象中指定范围内的数据。其实就是对这个blob中的数据进行切割,我们在对文件进行分片上传的时候需要使用到这个方法。

看到上面这些方法和属性,使用过HTML5提供的File接口的应该都很熟悉,这些属性和方法在File接口中也都有。 其实File接口就是基于Blob,继承blob功能并将其扩展为支持用户系统上的文件,也就是说:

File接口中的Flie对象就是继承与Blob对象。

blob对象的使用

上面说了很多关于Blob对象的一些概念性的东西,下面我们来看看实际用途。


分片上传

首先说说分片上传,我们在进行文件上传的时候,因为服务器的限制,会限制每一次上传到服务器的文件大小不会很大,这个时候我们就需要把一个需要上传的文件进行切割,然后分别进行上传到服务器。

假如需要做到这一步,我们需要解决两个问题:

  • 怎么切割?
  • 怎么得知当前传输的进度?

首先怎么切割的问题上面已经有过说明,因为File文件对象是继承与Blob对象的,因此File文件对象也拥有slice这个方法,我们可以使用这个方法将任何一个File文件进行切割。

代码如下:

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
var BYTES_PER_CHUNK = 1024 * 1024; // 每个文件切片大小定为1MB .



var blob = document.getElementById("file").files[0];



var slices = Math.ceil(blob.size / BYTES_PER_CHUNK);



var blobs = [];



slices.forEach(function(item, index) {



blobs.push(blob.slice(index,index + 1));



});

通过上面的方法。我们就得到了一个切割之后的File对象组成的数组blobs;

接下来要做的时候就是讲这些文件分别上传到服务器。

在HTTP1.1以上的协议中,有Transfer-Encoding这个编码协议,用以和服务器通信,来得知当前分片传递的文件进程。

这样解决了这两个问题,我们不仅可以对文件进行分片上传,并且能够得到文件上传的进度。

粘贴图片

blob还有一个应用场景,就是获取剪切板上的数据来进行粘贴的操作。例如通过QQ截图后,需要在网页上进行粘贴操作。

粘贴图片我们需要解决下面几个问题

  1. 监听用户的粘贴操作
  2. 获取到剪切板上的数据
  3. 将获取到的数据渲染到网页中

首先我们可以通过paste事件来监听用户的粘贴操作:

1
2
3
4
5
6
7
8
9
document.addEventListener('paste', function (e) {



console.info(e);



});

然后通过事件对象中的clipboardData 对象来获取图片的文件数据。

clipboardData对象介绍

介绍一下 clipboardData 对象,它实际上是一个 DataTransfer 类型的对象, DataTransfer 是拖动产生的一个对象,但实际上粘贴事件也是它。

clipboardData 的属性介绍

属性 类型 说明
dropEffect String 默认是 none
effectAllowed String 默认是 uninitialized
files FileList 粘贴操作为空List
items DataTransferItemList 剪切板中的各项数据
types Array 剪切板中的数据类型 该属性在Safari下比较混乱

items 介绍

items 是一个 DataTransferItemList 对象,自然里面都是 DataTransferItem 类型的数据了。

属性

items 的 DataTransferItem 有两个属性 kind 和 type

属性 说明
kind 一般为 string 或者 file
type 具体的数据类型,例如具体是哪种类型字符串或者哪种类型的文件,即 MIME-Type

方法

方法 参数 说明
getAsFile 如果 kind 是 file ,可以用该方法获取到文件
getAsString function(str) 如果 kind 是 string ,可以用该方法获取到字符串str

在原型上还有一些其他方法,不过在处理剪切板操作的时候一般用不到了。

type 介绍

一般 types 中常见的值有 text/plain 、 text/html 、 Files 。

说明
text/plain 普通字符串
text/html 带有样式的html
Files 文件(例如剪切板中的数据)

有了上面这些方法,我们可以解决第二个问题即获取到剪切板上的数据。

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
document.addEventListener('paste', function (e) {



console.info(e);



var cbd = e.clipboardData;



for(var i = 0; i < cbd.items.length; i++) {



var item = cbd.items[i];



console.info(item);



if(item.kind == "file"){



var blob = item.getAsFile();



if (blob.size === 0) {



return;



}



console.info(blob);



}



}



});

最后我们需要将获取到的数据渲染到网页上。

其实这个本质上就是一个类似于上传图片本地浏览的问题。我们可以直接通过HTML5的File接口将获取到的文件上传到服务器然后通过讲服务器返回的url地址来对图片进行渲染。也可以使用fileRender对象来进行图片本地浏览。

fileRender对象简介

从Blob中读取内容的唯一方法是使用 FileReader。

FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取。无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中。

方法名 参数 描述
readAsBinaryString file 将文件读取为二进制编码
readAsText file,[encoding] 将文件读取为文本
readAsDataURL file 将文件读取为DataURL
abort (none) 终端读取操作

FileReader接口包含了一套完整的事件模型,用于捕获读取文件时的状态。

事件 描述
onabort 中断
onerror 出错
onloadstart 开始
onprogress 正在读取
onload 成功读取
onloadend 读取完成,无论成功失败

通过上面的方法以及事件,我们可以发现,通过readAsDataURL方法及onload事件就可以拿到一个可本地浏览图片的DataURL。

最终代码如下:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
document.addEventListener('paste', function (e) {



console.info(e);



var cbd = e.clipboardData;



var fr = new FileReader();



var html = '';



for(var i = 0; i < cbd.items.length; i++) {



var item = cbd.items[i];



console.info(item);



if(item.kind == "file"){



var blob = item.getAsFile();



if (blob.size === 0) {



return;



}



console.info(blob);



fr.readAsDataURL(blob);



fr.on<x>load=function(e){



var result=document.getElementById("result");



//显示文件



result.innerHTML='<img src="' + this.result +'" alt="" />';



}



}



}



});

这样我们就可以监听到用户的粘贴操作,并且将用户粘贴的图片文件实时的渲染到网页之中了。

vue中的插槽slot

https://www.cnblogs.com/mandy-dyf/p/11528505.html

what

插槽是子组件中提供给父组件使用的一个占位符,用<slot></slot>标签表示,父组件可以在这个占位符中填充任何模板,如html,组件等,填充的内容会替换子组件中的<slot>标签。

1
2
3
4
5
6
7
8
9
10
11
//子组件
<template>
<div>
<h1>今天天气状况:</h1>
<slot></slot>
</div>
<template>
<script>
export default {
name: 'child'
}
1
2
3
4
5
6
// 父组件
<template>
<div>
<child><div>这是在父组件插入的内容</div></child>
</div>
</template>

输出:今天天气状况:这是在父组件插入的内容

vue.config.js配置文件详解

vue.config.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
27
28
29
30
31
32
33
34
35
36
37
38
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin')
const env = process.env.NODE_ENV;

module.exports = {
baseUrl: './',
outputDir: 'user-behavior-analysis',
devServer: {
open: true, //设置自动打开
port: 8080, //设置8080端口打开
https: false,
hotOnly: true,
disableHostCheck: true,
open: true,
proxy: {
'user-analysis-cms/': {
target: 'http://test.xx-motor.com/',
changeOrigin: true,
pathRewrite: {
'user-analysis-cms/': 'user-analysis-cms/',
},
cookieDomainRewrite: {
'localhost:8080': 'http://test.xx-motor.com/',
},
}
before: (app) => {},
},
configureWebpack: {
optimization: {
minimizer: [
]
},
},
chainWebpack: (config) => {
// 修复HMR
config.resolve.symlinks(true);
},
};

devServer配置

这里写你调用接口的基础路径来解决跨域,如果设置了代理,那你本地开发环境的axios的baseURL要写成空字符串。

只有一个接口ip端口时

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
module.exports = {
// 部署生产环境和开发环境下的URL。
// 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上
//例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 baseUrl 为 /my-app/。
//baseUrl 从 Vue CLI 3.3 起已弃用,请使用publicPath
//baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",
publicPath: process.env.NODE_ENV === "production" ? "./" : "/",

// outputDir: 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)
outputDir: "mycli3",
//用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)
assetsDir: "assets",
//指定生成的 index.html 的输出路径 (打包之后,改变系统默认的index.html的文件名)
// indexPath: "myIndex.html",
//默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变)
filenameHashing: false,

// lintOnSave:{ type:Boolean default:true } 问你是否使用eslint
lintOnSave: true,
//如果你想要在生产构建时禁用 eslint-loader,你可以用如下配置
// lintOnSave: process.env.NODE_ENV !== 'production',

//是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了,但是这会让你的应用额外增加 10kb 左右。(默认false)
// runtimeCompiler: false,

/**
* 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
* 打包之后发现map文件过大,项目文件体积很大,设置为false就可以不输出map文件
* map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。
* 有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。
* */
productionSourceMap: false,

// 它支持webPack-dev-server的所有选项
devServer: {
host: "0.0.0.0",
port: 8080, // 端口号
https: false, // https:{type:Boolean}
open: true, //配置自动启动浏览器
// proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理

// 配置多个代理
proxy: {
"/api": {
target: "http://192.168.x.xxx:8090", // 要访问的接口域名
ws: true, // 是否启用websockets
changeOrigin: true, //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: {
"^/api": "" //这里理解成用'/api'代替target里面的地址,比如我要调用'http://40.00.100.100:3002/user/add',直接写'/api/user/add'即可
}
}
}
}
};

解决跨域原理

1
2
3
4
5
6
7
8
9
10
11
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
}
}
}
};

changeOrigin默认为false,请求头中的host仍然是浏览器发送过来的host 。如果设置为true,请求头中的host会设置成target,且本地会虚拟一个服务器接受你的请求并代你发送该请求。

outputDir构建输出目录

当运行vue-cli-server build时生成的生产环境构建文件的目录

1
2
3
4
module.exports = {
outputDir: 'dist'
}
/*输出到dist目录中*/

错误案例

1
2
3
4
5
module.exports = {
publicPath: './',
outputDir: 'aaa'
}
/* 这样设置后打包生成的的文件夹依然是dist*/

注意点:

  1. vue.config.js文件必须放在与package.json同级。
  2. publicPath: ./是针对hash路径的,/是history的。

单路径代理

1
2
3
4
5
6
7
8
module.exports = {
//...
devServer: {
proxy: {
'/api': 'http://localhost:3000'
}
}
};

请求到 /api/xxx 现在会被代理到请求 http://localhost:3000/api/xxx, 例如 /api/user 现在会被代理到请求 http://localhost:3000/api/user

多路径代理

如果你想要代码多个路径代理到同一个target下, 你可以使用由一个或多个「具有 context 属性的对象」构成的数组:

1
2
3
4
5
6
7
8
9
module.exports = {
//...
devServer: {
proxy: [{
context: ['/auth', '/api'],
target: 'http://localhost:3000',
}]
}
};

路径重写

如果你不想始终传递 /api ,则需要重写路径:

1
2
3
4
5
6
7
8
9
10
11
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: {'^/api' : ''}
}
}
}
};

请求到 /api/xxx 现在会被代理到请求 http://localhost:3000/xxx, 例如 /api/user 现在会被代理到请求 http://localhost:3000/user

使用无效证书的服务器

默认情况下,不接受运行在 HTTPS 上,且使用了无效证书的后端服务器。如果你想要接受,只要设置 secure: false 就行。修改配置如下:

1
2
3
4
5
6
7
8
9
10
11
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'https://other-server.example.com',
secure: false
}
}
}
};

跳过代理

有时你不想代理所有的请求。可以基于一个函数的返回值绕过代理。
在函数中你可以访问请求体、响应体和代理选项。必须返回 false 或路径,来跳过代理请求。

例如:对于浏览器请求,你想要提供一个 HTML 页面,但是对于 API 请求则保持代理。你可以这样做:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
bypass: function(req, res, proxyOptions) {
if (req.headers.accept.indexOf('html') !== -1) {
console.log('Skipping proxy for browser request.');
return '/index.html';
}
}
}
}
}
};

vue-cli中proxyTable配置接口地址代理实例

修改config/index.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
27
28
module.exports = {
dev: {
// 静态资源文件夹
assetsSubDirectory: 'static',
// 发布路径
assetsPublicPath: '/',

// 代理配置表,在这里可以配置特定的请求代理到对应的API接口
// 使用方法:https://vuejs-templates.github.io/webpack/proxy.html
proxyTable: {
// 例如将'localhost:8080/api/xxx'代理到'https://wangyaxing.cn/api/xxx'
'/api': {
target: 'https://wangyaxing.cn', // 接口的域名
secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
},
// 例如将'localhost:8080/img/xxx'代理到'https://cdn.wangyaxing.cn/xxx'
'/img': {
target: 'https://cdn.wangyaxing.cn', // 接口的域名
secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
pathRewrite: {'^/img': ''} // pathRewrite 来重写地址,将前缀 '/api' 转为 '/'。
}
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 4200, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
}
|