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. H - Repeats (重复最多子串的次数)

    题目链接:https://cn.vjudge.net/contest/283743#problem/H 题目大意:T组数据,给你一个字符串,然后让你求这个字符串的重复最多子串的次数. 具体思路:论文题 ...

  2. 攻打医院服务器的SamSam勒索木马分析

    攻打医院服务器的SamSam勒索木马分析 近日一款名为SamSam的勒索木马在国外爆发.该木马利用医院系统的服务器漏洞实施入侵,再进行加密勒索钱财.由于医院网络信息安全水平普遍薄弱,SamSam成功感 ...

  3. android 基础题

    1. Android的四大组件是哪些,它们的作用? (1).Activity:Activity是Android程序与用户交互的窗口,是Android构造块中最基本的一种,它需要为保持各界面的状态,做很 ...

  4. 2017/05/02 java 基础 随笔

    1.PrtSc键是截屏键   打开画图软件  ctrl+v就可以复制到 2.win7以上可以  在当前目录下shift+右键 3.junit和javaweb应用的main函数在哪里? java程序跑起 ...

  5. uoj#188. 【UR #13】Sanrd(Min_25筛)

    题面 传送门 题解 这是一道语文题 不难看出,题目所求即为\(l\)到\(r\)中每个数的次大质因子 我们考虑\(Min\_25\)筛的过程,设 \[S(n,j)=\sum_{i=1}^nsec_p( ...

  6. java linux ftp问题

    java写的ftp上传类,本地测试环境可以用,阿里云服务器不可用,两者系统均为centos.经过测试,发现appche的ftpclient类不可用,换成sun的ftpclient可以使用.

  7. c++ 简单静态链表

    所有结点(结构体变量)都是在程序中定义的,不是临时开辟的,也不能用完后释放,这种链表称为静态链表.对各结点既可以通过上一个结点的next指针去访问,也可以直接通过结构体变量名s1, s2, s3去访问 ...

  8. 重新学习angularjs--第一篇(入门)

    几乎是一年之前,泛泛接触了angularjs,也做了一些项目,但是时至今日,几乎已经忘记了ng的使用,由于业务需要,近日要攻克这座难关,重新学习.会把学习的一些东西拿出来,记录之. angularjs ...

  9. visual studio 2017 installer 安装包的安装必备组件设置

    visual studio installer 2017  安装包的安装必备组件设置,默认设置只有net frmwork 4.6.1,如下图 这个时候如果打包安装,那么打出来的包一定需要先安装4.6. ...

  10. 5个php实例,细致说明传值与传引用的区别

    传值:是把实参的值赋值给行参 ,那么对行参的修改,不会影响实参的值 传引用 :真正的以地址的方式传递参数传递以后,行参和实参都是同一个对象,只是他们名字不同而已对行参的修改将影响实参的值 说明: 传值 ...