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变量等)的更多相关文章

  1. vue-cli 3.0 使用axios配置跨域访问豆瓣接口

    vue-cli 3.0 配置axios跨域访问豆瓣接口 自己做的小demo 由于豆瓣api跨域问题,因此不能直接通过ajax请求访问,我们通过vue-cli提供给我们的代理 进行配置即可, 在根目录下 ...

  2. 009-Spring Boot全局配置跨域请求支持

    1.Spring Boot 2.0以前全局配置跨域主要是继承WebMvcConfigurerAdapter @Configuration public class CorsConfig extends ...

  3. ASP.NET MVC4应用程序配置跨域访问

    开发框架是使用webapi做后台,HTML5做前台,通过ajax调用webapi后台,返回json结果. 用的编译器是visual Studio2013,下面是配置方法 1.web.config文件 ...

  4. django配置跨域并开发测试接口

    1.创建一个测试项目 1.1 创建项目和APP django-admin startproject BookManage # 创建项目 python manage.py startapp books ...

  5. 02.django配置跨域并开发测试接口

    1.创建一个测试项目   1.1 创建项目和APP   '''1.创建项目和APP''' django-admin startproject BookManage # 创建项目 python mana ...

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

    System.Web.Http.Cors配置跨域访问的两种方式 使用System.Web.Http.Cors配置跨域访问,众多大神已经发布了很多文章,我就不在详细描述了,作为小白我只说一下自己的使用心 ...

  7. WebApi使用cors配置跨域问题

    1.首先安装CORS,在WebApiCors项目上面使用Nuget搜索“microsoft.aspnet.webapi.cors”,安装第一个 2.当我们安装这个包之后,现有的packages目录下会 ...

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

    1.配置跨域 这个很简单,直接打开配置nginx.conf ,在http下配置下面三行代码:当然如果你是想某一个虚拟主机下跨域,那就在哪个server下面添加 add_header Access-Co ...

  9. eclipse加速/Nginx配置跨域代理

    下班时间到啦! --下班都是他们的,而我,还是什么都没有. eclipse加速 去掉包含js文件的包的js验证,否则每次启动都需要进行校验(右击项目->properties) Nginx配置跨域 ...

随机推荐

  1. 课程2:《黑马程序员_Java基础视频-深入浅出精华版》-视频列表-

    \day01\avi\01.01_计算机基础(计算机概述).avi; \day01\avi\01.02_计算机基础(计算机硬件和软件概述).avi; \day01\avi\01.03_计算机基础(软件 ...

  2. 2018-2019-2 网络对抗技术 20165320 Exp2 后门原理与实践

    后门原理与实践 windows获取Linux操作Shell 获取本机的IP netcat介绍:一个进行基本的TCP.UDP数据收发的工具 相关的参数与具体用法 windows打开监听: ncat.ex ...

  3. 基于神经网络的颜色恒常性—Fully Convolutional Color Constancy with Confidence-weighted Pooling

    论文地址: http://openaccess.thecvf.com/content_cvpr_2017/papers/Hu_FC4_Fully_Convolutional_CVPR_2017_pap ...

  4. Linux用户组相关指令

    ⒈增加用户组 ①groupadd 用户组名 ⒉删除用户组 ①groupdel 用户组名 ⒊修改用户所在的用户组 ①usermod -g 用户组 用户名 ★用户和用户组的相关文件 ①/etc/passw ...

  5. 初识CPU卡、SAM卡/CPU卡简介、SAM卡简介 【转】

    初识CPU卡.SAM卡/CPU卡简介.SAM卡简介 IC卡按照接口方式可分为接触式卡.非接触式卡.复合卡:按器件技术可分为非加密存储卡.加密存储卡和CPU卡. 加密存储卡是对持卡人的认证,只有输入正确 ...

  6. linux服务器last查看关机记录

    1.查看重启记录 last reboot命令 [root@test ~]# last reboot reboot system boot -.el6.x Mon May : - : (+:) rebo ...

  7. 查看tomcat运行状态

    实时查看tomcat并发连接数: netstat -na | grep ESTAB | grep 8080 | wc -l 实时查看apache并发连接数: netstat -na | grep ES ...

  8. linux windows 传输文件

    其中两种方式,当然,只是我自己试验的两个,其实还有别的方法,但是我也懒得实践了. 1  pscp c:\abc.sql root@192.168.1.1:/home/person/hww 2  Lrz ...

  9. python操作mysql数据库的常用方法使用详解

    python操作mysql数据库 1.环境准备: Linux 安装mysql: apt-get install mysql-server 安装python-mysql模块:apt-get instal ...

  10. Expm 1_2 实现快速排序的算法,并尝试采用不同的方法实现线性的划分过程.

    package org.xiu68.exp.exp1; public class Exp1_2 { //实现快速排序算法,采用不同的方法实现线性划分的过程 public static void mai ...