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中Math对象使用说明
Jan 16 Javascript
JS 显示当前日期与时间的代码
Mar 24 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
Apr 11 Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 Javascript
学习JS中的DOM节点以及操作
Apr 30 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
Sep 11 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
JS代码优化的8点建议
Feb 04 Javascript
你不知道的 TypeScript 高级类型(小结)
Aug 28 Javascript
JavaScript事件的委托(代理)的用法示例详解
Feb 18 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 实用代码收集
2010/01/22 PHP
ThinkPHP中的关联模型注意点
2014/06/16 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
用JavaScript实现对话框的教程
2015/06/04 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
JavaScript编程中实现对象封装特性的实例讲解
2016/06/24 Javascript
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
vue项目中使用多选框的实例代码
2020/07/22 Javascript
python使用marshal模块序列化实例
2014/09/25 Python
Python使用Scrapy爬取妹子图
2015/05/28 Python
打包发布Python模块的方法详解
2016/09/18 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
python编写猜数字小游戏
2019/10/06 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
小学家长学校培训材料
2014/08/24 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
世界文化遗产导游词
2015/02/13 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
我的长征观后感
2015/06/09 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js