VUE3.0升级与配置(跨域、全局scss变量等)
1.检查本机vue版本
vue -V
2.升级vue3.0命令
npm install -g @vue/cli
3.创建完项目后,在项目根目录新增vue.config.js文件,插入代码(简洁)
module.exports = {
runtimeCompiler: true, //是否使用包含运行时编译器的 Vue 构建版本
publicPath: '',
productionSourceMap: false, //不在production环境使用SourceMap
devServer: {
//跨域
port: 9527, // 端口号
open: true, //配置自动启动浏览器
proxy: {
// 配置跨域处理 可以设置多个
'/api': {
target: 'xxxx',
ws: true,
changeOrigin: true
}
}
}
}
4.设置scss/sass全局变量
module.exports = {
// ...
css: {
loaderOptions: {
sass: {
data: `
@import "@/assets/styles/_variable.scss"; // 路径自配
`
}
}
}
}
官网配置地址:https://cli.vuejs.org/zh/config/#vue-config-js
需要注意的是,baseUrl从 Vue CLI 3.3 起已弃用,需要使用publicPath。
VUE3.0升级与配置(跨域、全局scss变量等)的更多相关文章
- vue-cli 3.0 使用axios配置跨域访问豆瓣接口
vue-cli 3.0 配置axios跨域访问豆瓣接口 自己做的小demo 由于豆瓣api跨域问题,因此不能直接通过ajax请求访问,我们通过vue-cli提供给我们的代理 进行配置即可, 在根目录下 ...
- 009-Spring Boot全局配置跨域请求支持
1.Spring Boot 2.0以前全局配置跨域主要是继承WebMvcConfigurerAdapter @Configuration public class CorsConfig extends ...
- ASP.NET MVC4应用程序配置跨域访问
开发框架是使用webapi做后台,HTML5做前台,通过ajax调用webapi后台,返回json结果. 用的编译器是visual Studio2013,下面是配置方法 1.web.config文件 ...
- django配置跨域并开发测试接口
1.创建一个测试项目 1.1 创建项目和APP django-admin startproject BookManage # 创建项目 python manage.py startapp books ...
- 02.django配置跨域并开发测试接口
1.创建一个测试项目 1.1 创建项目和APP '''1.创建项目和APP''' django-admin startproject BookManage # 创建项目 python mana ...
- System.Web.Http.Cors配置跨域访问的两种方式
System.Web.Http.Cors配置跨域访问的两种方式 使用System.Web.Http.Cors配置跨域访问,众多大神已经发布了很多文章,我就不在详细描述了,作为小白我只说一下自己的使用心 ...
- WebApi使用cors配置跨域问题
1.首先安装CORS,在WebApiCors项目上面使用Nuget搜索“microsoft.aspnet.webapi.cors”,安装第一个 2.当我们安装这个包之后,现有的packages目录下会 ...
- nginx配置跨域、gzip加速、代理详细讲解
1.配置跨域 这个很简单,直接打开配置nginx.conf ,在http下配置下面三行代码:当然如果你是想某一个虚拟主机下跨域,那就在哪个server下面添加 add_header Access-Co ...
- eclipse加速/Nginx配置跨域代理
下班时间到啦! --下班都是他们的,而我,还是什么都没有. eclipse加速 去掉包含js文件的包的js验证,否则每次启动都需要进行校验(右击项目->properties) Nginx配置跨域 ...
随机推荐
- Docker三要素
一.镜像(Image) Docker镜像(Image)就是一个只读的模板,镜像可以用来创建Docker容器,一个镜像可以创建很多容器. Docker 面向对象 镜像 类(class) 容器 实例对象 ...
- 【转】C++的const类成员函数
我们知道,在C++中,若一个变量声明为const类型,则试图修改该变量的值的操作都被视编译错误.例如, const char blank=' '; blank='\n'; //错误 面向对象程序设计中 ...
- Android APP—— 开发入门教程
一.SDK下载 下载:adt-bundle-windows-x86_64-20140702.zip(20140702 已经是最后版本了) 解压出来如下: 点击Eclipse安装 创建一个新的工作空间安 ...
- nagios系列(四)之nagios主动方式监控tcp常用的80/3306等端口监控web/syncd/mysql及url服务
nagios主动方式监控tcp服务web/syncd/mysql及url cd /usr/local/nagios/libexec/ [root@node4 libexec]# ./check_tcp ...
- [Java]求文件大小并保留两位小数(文件大小是一个长整型数单位是Byte)
前言 为了获得一堆apk的大小,并与人类友好方式显示.本来是打算用以下方法,到时不能具体到保留两位小数. org.apache.commons.io.FileUtils.byteCountToDisp ...
- viewpager显示图片的Adapter
package com.ming.chiye.yishanghorse.Adapter; import android.content.Context; import android.graphics ...
- redis进阶
一.redis介绍 redis的功能特性 1.高速读写 2.数据类型丰富 3.支持持久化 4.多种内存分配及回收策略 5.支持事务 6.消息队列.redis用的多的还是发布-订阅模式 7.支持高可用 ...
- TensorFlow 框架
TensorFlow TensorFlow核心程序由2个独立部分组成: a:Building the computational graph构建计算图 b:Running the comput ...
- linux下的文件结构
linux下的文件结构,看看每个文件夹都是干吗用的/bin 二进制可执行命令/dev 设备特殊文件/etc 系统管理和配置文件/etc/rc.d 启动的配置文件和脚本/home 用户主目录的基点,比如 ...
- web----框架基础
Web框架本质: 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. 真实开发中的python web程序来说,一般会分为两部分:服务器 ...