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. I - Older Brother Gym - 101490I

    题目链接:https://cn.vjudge.net/problem/Gym-101490I 题目大意:给你一个整数,问你这个整数能不能表示成一个素数的k次方? 具体思路:对于每一个数,我们先判断他是 ...

  2. K-means聚类算法原理和C++实现

    给定训练集$\{x^{(1)},...,x^{(m)}\}$,想把这些样本分成不同的子集,即聚类,$x^{(i)}\in\mathbb{R^{n}}$,但是这是个无标签数据集,也就是说我们再聚类的时候 ...

  3. Linux磁盘分区、挂载

    ⒈Linux下磁盘说明 1)Linux硬盘分IDE硬盘和SCSI硬盘,目前基本上是SCSI硬盘. 2)对于IDE硬盘,使用“hdx~”标识符,“hd”代表IDE硬盘.   对于SCSI硬盘,使用“sd ...

  4. Majority Element(169) && Majority Element II(229)

    寻找多数元素这一问题主要运用了:Majority Vote Alogrithm(最大投票算法)1.Majority Element 1)description Given an array of si ...

  5. saltstack文件模块的replace操作简化

    代码已经过测试 import re import mmap import os import shutil old_text='test' new_text='text' path=r'C:\User ...

  6. oracle 用户 权限

    一. 概述 与权限,角色相关的视图大概有下面这些: DBA_SYS_PRIVS: 查询某个用户所拥有的系统权限 USER_SYS_PRIVS:   当前用户所拥有的系统权限 SESSION_PRIVS ...

  7. python内存数据库pydblite

    Pure-Python engine 最近由于项目开发中发现python informixDB模块对多线程的支持非常不好,当开启两个线程同时连接informix数据库的时候,数据库会报错,显示SQL ...

  8. 单例模式(懒汉、饿汉、同步锁、static、枚举)实现

    使用前提: 需要频繁的进行创建和销毁的对象,创建对象时耗时过多或耗费资源过多 三要素: 1.构造方法私有化: 2.实例化的变量引用私有化: 3.获取实例的方法共有. 1.饿汉式单例 弊端:在类装载的时 ...

  9. WampServer配置

    本机php环境搭建教程:windows环境下wampserver的配置教程--超级详细 对于初做PHP网站的朋友来说,第一步肯定是希望在自己电脑是搭建PHP环境,省去空间和上传的麻烦!但搭建环境也不是 ...

  10. linux unzip 中文乱码解决方法

    引自:https://blog.csdn.net/abyjun/article/details/48344379 unzip -O CP936 xxx.zip (用GBK, GB18030也可以)