vue-cli3配置与跨域处理方法

安装 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-cli 改为 @vue/cli 。 使用npm全局安装vue-cli3。

npm install @vue/cli -g

然后使用 vue -V

使用vue-cli3创建项目

vue-cli3 创建项目的方式和2.x也有一些区别。首先创建项目时给我们更多可配置的选项，在选择手动选择特性时，可以根据提示选择是否安装 vue-router 、 vuex 等。其次其目录结构也可2.x有区分，下文会详细讲。然后我们可以把本次安装配置保存为以后可以复用的preset,在以后创建项目时更快速。

1.输入 vue create vue_cli3_test ，上下键可以选择默认安装或者手动安装。这次我选择手动安装。

2.点击回车键，进入配置界面。将需要安装的配置前面勾选为*。空格键可以选中和取消选中。可以根据个人需求进行配置。

安装成功后根据提示进入目录，并运行项目。

cd vue_cli3_testyarn serve

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配置与跨域处理方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言小编会及时回复大家的

赞 (0)

相关推荐

  • Vue-cli3项目配置Vue.config.js实战记录

    Vue-cli3项目配置Vue.config.js实战记录

    Vue-cli3 搭建的项目 界面想对之前较为简洁 之前的build和config文件夹不见了,那么应该如何配置 如webpack等的配那只需要在项目的根目录下vue.config.js 文件(是根目录,不是src目录 语法 module.exports = { // 基本路径 baseUrl: '/', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build

  • vue-cli3脚手架的配置及使用教程

    这次给大家带来vue-cli3.0配置及使用详解,写给需要的朋友. Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发. 一个运行时依赖 (@vue/cli-service),该依赖:一个丰富的官方插件集合,集成了前端生态中最好的工具. 可升级: 基于 webpack 构建,并带有合理的默认配置: 可以通过项目内的配置文件进行

  • vue-cli3.0使用及部分配置详解

    好长一段时间没有关注vue脚手架了,昨天因为需要个后台模板,用脚手架 搞了一下,竟然发现指令不能用了,看官方文档已经升级3.0,也是试的玩了一下, 大致写写怎么玩的! 1.先全局安装vue-cli3.0 检测安装: vue -V 2.创建项目(这个就跟react创建脚手架项目比较像了) 这里如果你是第一次用3.0版本的话,是没有前两个的,而只有最后两个,这里是 让你选的,第一个是默认配置,一般选第二个,自己配置,这里选择最后一个 在选择功能后,会询问更细节的配置, TypeScript: 是否使

  • 详解如何配置vue-cli3.0的vue.config.js

    本文介绍了如何配置vue-cli3.0的vue.config.js,分享给大家,具体如下: vue-cli 3 英文文档 vue-cli 3 中文文档 webpack 4 plugins webpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下 vue-cli 3 的项目架构完全抛弃了 vue-cli 2 的原有架构,3 的设计更加抽象和简洁(此处后续可以详细介绍) vue

  • vue-cli3全面配置详解

    本文介绍了vue-cli3全面配置详解,分享给大家,具体如下: vue-cli3-config 创建项目 配置环境变量 通过在package.json里的scripts配置项中添加--mode xxx来选择不同环境 在项目根目录中新建.env, .env.production, .env.analyz等文件 只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中,代码中可以通过process.env.VUE_APP_BASE_API访问 NO

  • 详解Vue CLI3配置解析之css.extract

    大家还记得我们在老版本中,对于线上环境配置中会把所有的 css 多打成一个文件: 核心是使用了插件 extract-text-webpack-plugin,方式如下: 第一步都是加载插件 const ExtractTextPlugin = require('extract-text-webpack-plugin') 这个插件的描述如下: Extract text from a bundle, or bundles, into a separate file. 然后配置如下:(省去了 rules

  • 详解vue-cli3 中跨域解决方案

    此方案只能用于开发环境,线上最好设置同源策略(遇到个后端,装你妈批) 前后端不在同一服务器的情况下,前端要访问后端API,可通过在vue.config.js中配置代理服务器. 0:前提条件 1:安装vue-lic 2:安装axios  用于发送请求. 1:将任何未知请求转发到代理服务器 如: 前端地址:127.0.0.1 后端地址:127.0.0.2 当访问地址为 127.0.0.1/api,没有匹配到这地址,那么就会被转发到代理服务器127.0.0.2/api module.exports={

  • vue-cli3配置与跨域处理方法

    安装 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-cli 改为 @vue/cli . 使用npm全局安装vue-cli3. npm inst

  • 解决vue cli3使用axios跨域问题

    解决vue cli3使用axios跨域问题

    目录 一.什么是跨域 1.跨域 2.同源策略 3.跨域问题怎么出现的 二.使用 axios 演示并解决跨域问题(vue-cli3.0) 1.项目创建.与 axios 的使用 2.跨域问题重现 3.解决跨域问题 一.什么是跨域 1.跨域 指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制. 2.同源策略 是指协议,域名,端口都要相同,其中有一个不同都会产生跨域,在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问. 3.跨域问题怎么出

  • 通过Nginx代理转发配置实现跨域的方法（API代理转发）

    通过Nginx代理转发配置实现跨域的方法（API代理转发）

    前言 在WEB开发中,我们经常涉及到跨域的请求,解决跨域问题的方式有很多,比如有window.name.iframe.JSONP.CORS等等,就不详细展开了,涉及到 协议.端口 不一样的跨域请求方式是采用代理,这里我们重点聊聊Nginx代理的方式. 场景 本地启动了一个前后端分离的WEB应用,端口为:3000,可以通过http://127.0.0.1:3000访问前端页面,页面中有些Ajax请求的地址为http://127.0.0.1:3000/api/getList,一般情况下肯定是404或

  • 利用Nginx处理Vue开发环境的跨域的方法

    1. 需求 本地测试域名与线上域名相同,以便正确传递 Cookie 和进行 SSO 测试. 注:由于 SSO 登录后,相关 Cookie 被加在四级域名上,因而需要做到本地测试域名和线上接口域名相同. 2. 方案 配置 Host 文件使线上域名指向 Localhost: 127.0.0.1 product.xxx.xxx.com 配置 Nginx 进行对应转发: server { listen 80; listen [::]:80; server_name ${product.xxx.xxx.c

  • vue+springboot前后端分离实现单点登录跨域问题解决方法

    最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登录咯,至于不知道什么是单点登录的同学,建议去找一下万能的度娘. 刚接到这个需求的时候,老夫心里便不屑的认为:区区登录何足挂齿,但是,开发的过程狠狠的打了我一巴掌(火辣辣的一巴掌)...,所以这次必须得好好记录一下这次教训,以免以后再踩这样的坑. 我面临的第一个问题是跨域,浏览器控制台直接报CORS,

  • 基于VUE移动音乐WEBAPP跨域请求失败的解决方法

    基于VUE移动音乐WEBAPP跨域请求失败的解决方法

    在学习一位vue大牛的课程<VUE2.0移动端音乐App开发>时,由于vue的版本原因遇到了一些问题 这是其中之一,花费了很多的时间去解决 虽然搞定了这个问题,但是很多东西理解也不是很到位,下面详细说: 系统windows,vue版本2.9.1 项目结构如下: 这里就知道版本差异了,我没有dev-server这个文件,按照黄大牛的配置会报404的错误,错误具体我就不贴了 直接上解决办法 首先在config目录下配置index.js文件如下 然后在webpack.dev.conf中配置如下 当然

  • vue中axios解决跨域问题和拦截器的使用方法

    vue中axios不支持vue.use()方式声明使用. 所以有两种方法可以解决这点: 第一种: 在main.js中引入axios,然后将其设置为vue原型链上的属性,这样在组件中就可以直接 this.axios使用了 import axios from 'axios'; Vue.prototype.axios=axios; components: this.axios({ url:"a.xxx", method:'post', data:{ id:3, name:'jack' } }

  • vue实现跨域的方法分析

    vue实现跨域的方法分析

    本文实例讲述了vue实现跨域的方法.分享给大家供大家参考,具体如下: 在请求的资源上没有"访问控制允许源"标头.因此,"http://LoalHoal:8081"是不允许访问的. 出现这个报错就说明,浏览器限制了跨域,需要设置跨域 一.后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方

  • Vue中跨域及打包部署到nginx跨域设置方法

    众所周知,我们在做前后端分离项目的时候,经常需要在本地起前端工程,接口希望拉取服务端的实际数据而不是本地的mock数据,而如果本地程序直接访问远程接口, 肯定会遇到跨域问题. 什么是跨域?实现跨域的多种方式? 这里我就不详细介绍了,大家自行百度哈 为什么要实现前端跨域 一般来讲,前后端分离的项目在大公司都会由后台设置允许跨域访问,因为后台设置允许跨域是很简单和方便的,但是某些情况下,一些小公司或者你工作的场所后台不怎么配合的情况下,这就需要前端来配置跨域请求来方便我们使用接口 vue项目中的配置

  • 详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)

    在用vue做前端开发的时候,因为一般跑vue使用的webpack自带的node服务,而我们实际要使用的数据确是后台服务器上的,所以这就涉及到服务器请求跨域的问题.本来在诸如axios之类的网络请求参数里面配置 withCredentials: true, 就可以解决跨域问题的,但是现在浏览器比如chorme有做了新的跨域限制,比如要服务器端配置允许跨域才行,详见跨域问题解决,是英文的,看起来需要花点功夫:那有没有不需要服务器端配置就能解决浏览器的跨域问题的办法呢?答案肯定是有的!! 这里就说ch

随机推荐