vue-cli3配置与跨域处理方法


Posted in Javascript onAugust 17, 2019

安装 vue-cli3 环境准备

1. 如果您已安装 vue-cli2 ,请先删除当前脚手架,否则无法成功安装 vue-cli3

npm uninstall vue-cli -g

2. 检查 node.js 版本。 vue-cli3 需要 node 版本大于8.9。在cmd中输入 node -v 查看版本。如果版本过低,请先去 node官网 中下载高版本。

vue-cli3配置与跨域处理方法

安装脚手架

vue-cli3的包名有 vue-cli 改为 @vue/cli 。 使用npm全局安装vue-cli3。

npm install @vue/cli -g

然后使用 vue -V

vue-cli3配置与跨域处理方法

使用vue-cli3创建项目

vue-cli3 创建项目的方式和2.x也有一些区别。首先创建项目时给我们更多可配置的选项,在选择手动选择特性时,可以根据提示选择是否安装 vue-routervuex 等。其次其目录结构也可2.x有区分,下文会详细讲。然后我们可以把本次安装配置保存为以后可以复用的preset,在以后创建项目时更快速。

1.输入 vue create vue_cli3_test ,上下键可以选择默认安装或者手动安装。这次我选择手动安装。

vue-cli3配置与跨域处理方法

2.点击回车键,进入配置界面。将需要安装的配置前面勾选为*。空格键可以选中和取消选中。可以根据个人需求进行配置。

安装成功后根据提示进入目录,并运行项目。

cd vue_cli3_testyarn serve

vue-cli3配置与跨域处理方法

3. vue-cli3 提供了图形界面方式进行创建项目, 可以在网页上直接进行项目的配置。

vue ui

4.打开目录时发现配置文件都在了,大家不要慌张。可以在 package.json 文件的同级目录下创建 vue.config.js 文件。文件的格式应该为

// vue.config.js
module.exports = {
 // 选项...
}

下面为我的基础配置:

module.exports = {
  outputDir: 'dist',  //build输出目录
  assetsDir: 'assets', //静态资源目录(js, css, img)
  lintOnSave: false, //是否开启eslint
  devServer: {
    open: true, //是否自动弹出浏览器页面
    host: "localhost", 
    port: '8081', 
    https: false,  //是否使用https协议
    hotOnly: false, //是否开启热更新
    proxy: null,
  }
}

官网给出了丰富而全面的配置,更多配置请参考 https://cli.vuejs.org/zh/conf... 。

跨域处理

前后端分离开发时,不得不面对跨域问题。对于跨域,可以用两种办法进行处理。

1.安装nginx,将后端和前端都代理带nginx上。

2.在vue-cli中配置proxy,将API请求代理到API服务器上。设置devServer.proxy

devServer: {
    open: true, //是否自动弹出浏览器页面
    host: "localhost", 
    port: '8081',
    https: false,
    hotOnly: false, 
    proxy: {
      '/api': {
        target: 'http://localhost:5000', //API服务器的地址
        ws: true, //代理websockets
        changeOrigin: true, // 虚拟的站点需要更管origin
        pathRewrite: {  //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
          '^/api': ''
        }
      }
    },
  }

所以若是后端的API为'/aaa/ccc',我们需要在发请求时将路径设置为'/api/aaa/ccc',这样我们的请求才会被proxy代理到。

总结

以上所述是小编给大家介绍的vue-cli3配置与跨域处理方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言小编会及时回复大家的

Javascript 相关文章推荐
Javascript 获取滚动条位置等信息的函数
Sep 08 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
Oct 03 Javascript
javascript+xml实现简单图片轮换(只支持IE)
Dec 23 Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
vue2.0 常用的 UI 库实例讲解
Dec 12 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
Aug 17 #Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 #Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 #Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 #Javascript
微信小程序框架的页面布局代码
Aug 17 #Javascript
vue实现滑动到底部加载更多效果
Oct 27 #Javascript
vue实现页面滚动到底部刷新
Aug 16 #Javascript
You might like
php实现的树形结构数据存取类实例
2014/11/29 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
javascript 触发事件列表 比较不错
2009/09/03 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
nodejs实现获取当前url地址及url各种参数值
2015/06/25 NodeJs
原生js页面滚动延迟加载图片
2015/12/20 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
快速解决js开发下拉框中blur与click冲突
2016/10/10 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
Node.js使用Angular简单示例
2018/05/11 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
2019/09/06 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
python通过yield实现数组全排列的方法
2015/03/18 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
python常用运维脚本实例小结
2020/02/14 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
求职信结尾怎么写
2014/05/26 职场文书
公司禁烟通知
2015/04/23 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
五一放假通知怎么写
2015/08/18 职场文书
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis
Docker官方工具docker-registry案例演示
2022/04/13 Servers