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 相关文章推荐
自适应图片大小的弹出窗口
Jul 27 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 Javascript
AngularJS封装指令方法详解
Dec 12 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 Javascript
react中使用css的7中方式(最全总结)
Feb 11 Javascript
原生JS实现随机点名项目的实例代码
Apr 30 Javascript
Webpack的Loader和Plugin的区别
Nov 09 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项目中比较通用的php自建函数的详解
2013/06/06 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
点击按钮弹出模态框的一系列操作代码实例
2019/03/29 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
js函数和this用法实例分析
2020/03/13 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
前端vue+elementUI如何实现记住密码功能
2020/09/20 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
Python3 Random模块代码详解
2017/12/04 Python
浅谈python之新式类
2018/08/12 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
[原创]赚疯了!转手立赚800+?大佬的python「抢茅台脚本」使用教程
2021/01/12 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
加拿大大码女装购物网站:Penningtons
2020/12/26 全球购物
歌唱比赛获奖感言
2014/01/21 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
2014年环保工作总结
2014/11/26 职场文书
教师节慰问信
2015/02/15 职场文书
Django 实现jwt认证的示例
2021/04/30 Python
Java详细解析==和equals的区别
2022/04/07 Java/Android
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server
windows系统安装配置nginx环境
2022/06/28 Servers