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 Event学习第九章 鼠标事件
Feb 08 Javascript
JQuery select控件的相关操作实现代码
Sep 14 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 Javascript
js实现跨域的多种方法
Dec 25 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 Javascript
Vue.js数据绑定之data属性
Jul 07 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
vue实现购物车列表
Jun 30 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仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
PHP实现递归的三种方法
2020/07/04 PHP
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
微信小程序签到功能
2018/10/31 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
Python with的用法
2014/08/22 Python
解读Django框架中的低层次缓存API
2015/07/24 Python
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
Python如何使用字符打印照片
2020/01/03 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
解决python运行启动报错问题
2020/06/01 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
python中的垃圾回收(GC)机制
2020/09/21 Python
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
android面试问题与答案
2016/12/27 面试题
咨询公司各岗位职责
2013/12/02 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
招标承诺书
2014/08/30 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android