// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 这里只列一部分,具体配置参考文档
module.exports = {
// 部署生产环境和开发环境下的URL。
// 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上
//例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 baseUrl 为 /my-app/。
//baseUrl 从 Vue CLI 3.3 起已弃用,请使用publicPath
//baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",
publicPath: process.env.NODE_ENV === "production" ? "./" : "/",

// outputDir: 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)
outputDir: "mycli3",
//用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)
assetsDir: "assets",
//指定生成的 index.html 的输出路径 (打包之后,改变系统默认的index.html的文件名)
// indexPath: "myIndex.html",
//默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变)
filenameHashing: false,

// lintOnSave:{ type:Boolean default:true } 问你是否使用eslint
lintOnSave: true,
//如果你想要在生产构建时禁用 eslint-loader,你可以用如下配置
// lintOnSave: process.env.NODE_ENV !== 'production',

//是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了,但是这会让你的应用额外增加 10kb 左右。(默认false)
// runtimeCompiler: false,

/**
* 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
* 打包之后发现map文件过大,项目文件体积很大,设置为false就可以不输出map文件
* map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。
* 有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。
* */
productionSourceMap: false,

// 它支持webPack-dev-server的所有选项
devServer: {
host: "localhost",
port: 1111, // 端口号
https: false, // https:{type:Boolean}
open: true, //配置自动启动浏览器
// proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理

// 配置多个代理
proxy: {
"/api": {
target: "<url>",// 要访问的接口域名
ws: true,// 是否启用websockets
changeOrigin: true, //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: {
'^/api': '' //这里理解成用'/api'代替target里面的地址,比如我要调用'http://40.00.100.100:3002/user/add',直接写'/api/user/add'即可
}
},
"/foo": {
target: "<other_url>"
}
}
}
}

vue cli3.3 以上版本配置vue.config.js的更多相关文章

  1. vue cli3.3 以上版本配置vue.config.js 及反向代理操作解决跨域操作

    const webpack = require('webpack') module.exports = { configureWebpack: { plugins: [ new webpack.Pro ...

  2. webpack安装大于4.x版本(没有配置webpack.config.js)

    webpack安装大于4.x版本(没有配置webpack.config.js) webpack 输出参数-o 高版本  如果安装的webpack版本大于4+,还需要安装webpack-cli.在没有配 ...

  3. webpack安装低于4版本(没有配置webpack.config.js)

    webpack安装低于4版本(没有配置webpack.config.js) webpack 无需配置输出参数-o 低版本  1.初始化项目 npm init -y 初始化项目 2.安装webpack@ ...

  4. 在 vue cli3 的项目中配置双服务,模拟 ajax 分页请求

    最近安装了下vue cli3版本,与 cli 2 相比,文件少了,以前配置方法也不管用了.demo 中的大量的数据,需要做成 ajax 请求的方式来展示数据,因此,需要启动两个服务,一个用作前端请求, ...

  5. VUE CLI3.0安装及配置

    # 安装 npm install -g @vue/cli # 查看已安装版本vue --version 或者 vue -V # 卸载 npm uninstall @vue/cli -g # 新建项目 ...

  6. @vue/cli 3.x 版本配置productionGzip提高性能

    第一步:安装插件 npm i -D compression-webpack-plugin 第二步:引入.在文件vue.config.js里导入compression-webpack-plugin,并添 ...

  7. 配置webpack.config.js中的文件

    webpack.config.js文件中,主要包括 entry:入口文件 output:出口文件 module:模块 plugins:插件 这几部分 1.基本配置 运行 webpack 这一命令可以将 ...

  8. Vue Cli3工具中,配置目录别名,alias

  9. vue cli3超详细创建多页面配置

    1.首先按照vue cli3 给的入门文档下载个vue cli3 如果之前下载了vue cli2的要先卸载之前的 2.检查安装是否成功 3.ok,现在环境搭建好了,新建项目 vue create he ...

随机推荐

  1. openssl req(生成证书请求和自建CA)(转)

    openssl req(生成证书请求和自建CA)     伪命令req大致有3个功能:生成证书请求文件.验证证书请求文件和创建根CA.由于openssl req命令选项较多,所以先各举几个例子,再集中 ...

  2. <q> 与 <blockquote> 的区别

    <q> 标签在本质上与 <blockquote> 是一样的.不同之处在于它们的显示和应用.<q> 标签用于简短的行内引用.如果需要从周围内容分离出来比较长的部分(通 ...

  3. java实现图片验证码

    一.验证码生成类 package hbi.tech.utils; import javax.imageio.ImageIO; import java.awt.*; import java.awt.im ...

  4. 织梦cms列表页获取标签

    <!-- 标签 --> [field:id runphp='yes'] global $cfg_cmspath; $tags = GetTags(@me); $revalue = ''; ...

  5. FFmpeg(六) 播放视频之GLSurfaceView显示RGB数据

    一.播放视频说明 1.两种方式播放视频 ①shader播放YUV,后面再介绍. ②RGB直接显示数据,简单.性能差,用到FFmpeg的格式转换,没有shader效率高.本文介绍这个方式. 2.GLSu ...

  6. 阿里云VS腾讯云 谁才是中国未来的云计算之王?

    阿里云早在 2009 年就已经开始布局云计算领域,具有先发优势.据统计,40% 的中国 500 强企业.近一半中国上市公司.80% 中国科技类公司是阿里云的客户.而腾讯云基于腾讯自身在游戏.视频.社交 ...

  7. 无意间做了个 web 版的 JVM 监控端(前后端分离 React+Spring Boot)

    之前写了JConsole.VisualVM 依赖的 JMX 技术,然后放出了一个用纯 JMX 实现的 web 版本的 JConsole 的截图,今天源码来了. 本来就是为了更多的了解 JMX,第一步就 ...

  8. c#关于JWT跨域身份验证解决方案

    学习程序,不是记代码,而是学习一种思想,以及对代码的理解和思考. JSON Web Token(JWT)是目前最流行的跨域身份验证解决方案.为了网络应用环境间传递声明而执行的一种基于JSON的开发标准 ...

  9. python编程基础之三十六

    文件处理:文件处理包括读文件,写文件 读文件: 1.打开文件 2.读取文件 3.关闭文件 写文件: 1.打开文件 2.写如文件 3.关闭文件 无论是读取文件还是写文件都时需要打开文件,和关闭文件 打开 ...

  10. 重磅发布 | 全球首个云原生应用标准定义与架构模型 OAM 正式开源

    作者: OAM 项目负责人 导读:2019 年 10 月 17 日,阿里巴巴合伙人.阿里云智能基础产品事业部总经理蒋江伟(花名:小邪)在 Qcon 上海重磅宣布,阿里云与微软联合推出开放应用模型 Op ...