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 相关文章推荐
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
JS 表单验证大全
Nov 23 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
Jan 02 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
微信小程序实现表单校验功能
Mar 30 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 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防止form重复提交的方法
2013/07/01 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
用javascript实现给图片加链接
2007/08/15 Javascript
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
Highcharts入门之简介
2016/08/02 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
基于jQuery的checkbox全选问题分析
2016/11/18 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
基于复选框demo(分享)
2017/09/27 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
React和Vue中监听变量变化的方法
2018/11/14 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
Nest.js 授权验证的方法示例
2021/02/22 Javascript
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
Python装饰器知识点补充
2018/05/28 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
python文件和文件夹复制函数
2020/02/07 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
交通专业个人自荐信格式
2013/09/23 职场文书
资产经营总监岗位职责范文
2013/12/01 职场文书
担保书怎么写
2014/04/01 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python