VUE3.0升级与配置(跨域等)

1.检查本机vue版本

vue -V

2.升级vue3.0命令

npm install -g @vue/cli

3.创建完项目后,在项目根目录新增vue.config.js文件,插入代码(简洁)

 1 module.exports = {
 2   runtimeCompiler: true, //是否使用包含运行时编译器的 Vue 构建版本
 3   publicPath: ‘‘,
 4   productionSourceMap: false, //不在production环境使用SourceMap
 5   devServer: {
 6     //跨域
 7     port: 9527, // 端口号
 8     open: true, //配置自动启动浏览器
 9     proxy: {
10       // 配置跨域处理 可以设置多个
11       ‘/api‘: {
12         target: ‘xxxx‘,
13         ws: true,
14         changeOrigin: true
15       }
16     }
17   }
18 }

官网配置地址:https://cli.vuejs.org/zh/config/#vue-config-js

需要注意的是,baseUrl从 Vue CLI 3.3 起已弃用,需要使用publicPath

原文地址:https://www.cnblogs.com/e-cat/p/10558595.html

时间: 2024-10-10 12:20:38

VUE3.0升级与配置(跨域等)的相关文章

System.Web.Http.Cors配置跨域访问的两种方式

System.Web.Http.Cors配置跨域访问的两种方式 使用System.Web.Http.Cors配置跨域访问,众多大神已经发布了很多文章,我就不在详细描述了,作为小白我只说一下自己的使用心得.在webapi中使用System.Web.Http.Cors配置跨域信息可以有两种方式.  一种是在App_Start.WebApiConfig.cs的Register中配置如下代码,这种方式将在所有的webapi Controller里面起作用. using System; using Sys

win2003 配置跨域邮件服务器

win2003 配置跨域邮件服务器

nginx配置跨域、gzip加速、代理详细讲解

1.配置跨域 这个很简单,直接打开配置nginx.conf ,在http下配置下面三行代码:当然如果你是想某一个虚拟主机下跨域,那就在哪个server下面添加 add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Headers X-Requested-With; add_header Access-Control-Allow-Methods GET,POST,OPTIONS; 2.配置gzip,压缩访

vue开发环境配置跨域,一步到位

本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问,前端跨域解决方案 production:产品 生产环境 development:开发 开发环境 1.开发环境设置跨域 使用工具:vue-cli自带的配置 配置目录 /config/index.js //自行复制黏贴 proxyTable: { '/apis':{ target: 'http://10.1.63.26:19080/', // 后台api changeOrigin: true, //

nginx里配置跨域

发布于 881天前  作者 wendal  1404 次浏览  复制  上一个帖子  下一个帖子 标签: nginx 跨域 if ($request_method = OPTIONS ) { add_header Access-Control-Allow-Origin "*"; add_header Access-Control-Allow-Methods "GET, OPTIONS, POST, GET"; add_header Access-Control-Al

vue-cli配置跨域代理

现在使用vue大多使用了前后端分离模式,因此游览器经常显示跨域失败的信息,现在跨域的方式很多种,主要分两大类,ajax跨域,dom跨域,具体的方法就不例举啦. vue-cli作为一个强大的脚手架,内置了一个简单的配置型跨域方式 找到目录下的config文件下,index.js中dev配置对象中的proxyTable属性,这里是一个对象 下面对这个对象属性进行解析: proxyTable: { '/api':{ //这里的key就是axios的baseURL target: 'http://127

web.config 配置跨域问题

<httpProtocol> <customHeaders> <!-- 跨域配置 --> <add name="Access-Control-Allow-Origin" value="*" /> </customHeaders> </httpProtocol>

nginx配置跨域访问

前端要在本地测试ajax接口,无法跨域访问,所以在测试环境的nginx配置了跨域支持,方法如下: 在nginx.conf文件, http块下配置 42 #support cross domain access 43 add_header Access-Control-Allow-Origin *; 44 add_header Access-Control-Allow-Headers X-Requested-With; 45 add_header Access-Control-Allow-Meth

Nginx配置跨域请求 Access-Control-Allow-Origin *

当出现403跨域错误的时候 No 'Access-Control-Allow-Origin' header is present on the requested resource,需要给Nginx服务器配置响应的header参数: 一. 解决方案 只需要在Nginx的配置文件中配置以下参数: location / { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, P