npm和代理服务以及引入各种外部资源的配置

128 阅读 0 评论 85 点赞

我是靠谱客的博主俏皮电脑，这篇文章主要介绍npm和代理服务以及引入各种外部资源的配置，现在分享给大家，希望可以做个参考。

1、 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

安装cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
修改npm默认为cnpm:
npm config set registry https://registry.npm.taobao.org

2、安装vue-lic工具

复制代码

1
2
 npm install -g vue-cli

3、安装webpack

复制代码

1
2
npm install --save-dev webpack

4、初始化vue-cli

复制代码

1
2
vue init webpack +项目名

5、安装jqery和bootstarp

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
(1)、npm/cnpm install jQuery
(2)、修改webpack.base.conf.js文件:
	在头部加上var webpack = require('webpack');
	在node属性的plugins属性里加上
	plugins: [
	    new webpack.optimize.CommonsChunkPlugin('common.js'),
	    new webpack.ProvidePlugin({
	      jQuery: "jquery",
	      $: "jquery",
	      "windows.jQuery": "jquery"
	    })
	  ]
(3)、main.js里面导入:
import $ from ‘jquery’
import ‘…/static/bootstrap-3.3.7-dist/css/bootstrap.css’;
import ‘…/static/bootstrap-3.3.7-dist/js/bootstrap.min’;

6、安装vuex

复制代码

1
2
npm install vuex --save

7、安装element-ui

复制代码

1
2
3
4
5
6
7
npm i element-ui -S
在main.js引入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
然后vue使用引入的ElementUI
Vue.use(ElementUI);

8、代理相关配置

(1)、安装axios

复制代码

1
2
npm install --save axios

(2)、axios配置:

<1>请求工具类util.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
	//引入axios
	import axios from 'axios';
	//设置api接口和imgPath根路径
	const Util={
	  apiPath:'/apis',
	  imgPath:''
	}
	//声明axios发送请求的方法ajax,设置发送请求的根路径为apiPath,
	// 也就是说不管什么地方调用Util.ajax方法
	// 路径都为Util.apiPath+req路径
	  Util.ajax=axios.create({
	    baseURL:Util.apiPath
	  });
	
	//声明axios发送请求的方法ajax返回结果后的拦截器
	Util.ajax.interceptors.response.use(res=>{
	  return res.data;
	 })
	
	//导出Util
	export default Util;
	
说明：
	是axios请求的工具js，用于在设置axios请求的根路径(/apis),设置返回后结果的处理:
	Util.ajax.interceptors.response.use(res=>{
		  return res.data;
	 })

<2>main.js

复制代码

1
2
3
4
5
	// 引入util.js
	import util from './libs/util.js';
	// 设置全局变量$axios
	Vue.prototype.$axios = util;

(3)、config/index.js文件

<1>配置代理服务:

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
dev: {
	    // Paths
	    assetsSubDirectory: 'static',
	    assetsPublicPath: '/',
	    proxyTable: {
	      '/apis':{
	        target: "https://cnodejs.org/api/v1",
	        changeOrigin:true,
	        pathRewrite:{
	          '^/apis':'/'
	        }
	      }
	    }

(4)、总说明:

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
vue-lic项目自带服务器,
当需要请求数据接口的时候,会遇到跨域的问题，这时候就需要修改config/index.js文件的proxyTable属性。
(1)、'/apis':  这里于util.js里面的axios请求根路径对应,项目中的请求,只要是请求路径为/apis，j就会执行'/apis':{}里面的配置
(2)、target:目标路径:https://cnodejs.org/api/v1
(3)、changeOrigin:true:跨域
(4)、pathRewrite:重写:这里的意思是,当路径里面有apis的时候,就将apis字符替换为''。

以上配置之前,项目中只要是this.$axios.ajax.get或者this.$axios.ajax.post,最终的路径为:
(1)、首先是/apis+url
(2)、请求到本地服务器,因为config/index.js里面配置了proxyTable,所以会根据/apis找到相应的配置
(3)、所有路径就变成了"https://cnodejs.org/api/v1"+"/apis"+url
(4)、因为设置了路径重写,会替换所有的/apis为空,最终的路径为:
https://cnodejs.org/api/v1+url