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 相关文章推荐
addRule在firefox下的兼容写法
Nov 30 Javascript
一个无限级XML绑定跨框架菜单(For IE)
Jan 27 Javascript
用javascript实现的仿Flash广告图片轮换效果
Apr 24 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
jquery调用asp.net 页面后台的实现代码
Apr 27 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
Express的路由详解
Dec 10 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
May 26 Javascript
Node.js Buffer用法解读
May 18 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 20 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 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
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
Python向日志输出中添加上下文信息
2017/05/24 Python
python实现飞机大战
2018/09/11 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
Linux的文件类型
2016/07/05 面试题
仓库门卫岗位职责
2013/12/22 职场文书
安全承诺书格式
2014/05/21 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
单位考核聘任报告
2015/03/02 职场文书
会议新闻稿
2015/07/17 职场文书
MySQL创建定时任务
2022/01/22 MySQL
Golang日志包的使用
2022/04/20 Golang