vue-cli中config目录下的index.js文件详解

// see http://vuejs-templates.github.io/webpack for documentation.
// path是node.js的路径模块,用来处理路径统一的问题
var path = require('path')module.exports = {
// 下面是build也就是生产编译环境下的一些配置build: {
// 导入prod.env.js配置文件,只要用来指定当前环境,详细见(1)env: require('./prod.env'),
// 下面是相对路径的拼接,假如当前跟目录是config,那么下面配置的index属性的属性值就是dist/index.html
//path.resolve() 方法会把一个路径或路径片段的序列解析为一个绝对路径。index: path.resolve(__dirname, '../dist/index.html'),adminIndex: path.resolve(__dirname, '../dist/admin.html'),
// 下面定义的是静态资源的根目录 也就是dist目录assetsRoot: path.resolve(__dirname, '../dist'),
// 下面定义的是静态资源根目录的子目录static,也就是dist目录下面的staticassetsSubDirectory: 'static',
// 下面定义的是静态资源的公开路径,也就是真正的引用路径assetsPublicPath: 'https://cdn.XXXX.cn/siteResource/pop-online-fund-vote-web/',
// 下面定义是否生成生产环境的sourcmap,sourcmap是用来debug编译后文件的,通过映射到编译前文件来实现productionSourceMap: true,// Gzip off by default as many popular static hosts such as// Surge or Netlify already gzip all static assets for you.// Before setting to `true`, make sure to:// npm install --save-dev compression-webpack-plugin
// 下面是是否在生产环境中压缩代码,如果要压缩必须安装compression-webpack-pluginproductionGzip: false,
// 下面定义要压缩哪些类型的文件productionGzipExtensions: ['js', 'css'],// Run the build command with an extra argument to// View the bundle analyzer report after build finishes:// `npm run build --report`// Set to `true` or `false` to always turn it on or off
// 下面是用来开启编译完成后的报告,可以通过设置值为true和false来开启或关闭 
// 下面的process.env.npm_config_report表示定义的一个npm_config_report环境变量,可以自行设置bundleAnalyzerReport: process.env.npm_config_report},dev: {
// 引入当前目录下的dev.env.js,用来指明开发环境,详见(2)env: require('./dev.env'),
// 下面是dev-server的端口号,可以自行更改port: 443,
// 下面表示是否自定代开浏览器autoOpenBrowser: true,assetsSubDirectory: 'static',assetsPublicPath: '/',
// 下面是代理表,作用是用来,建一个虚拟api服务器用来代理本机的请求,只能用于开发模式 // 详见(3)proxyTable: {'/api': {target: 'http://localhost:8082',pathRewrite: {'^/api': '/'}},'/pop-shared-web-components': {target: 'http://pop-shared-web-components.cn:3000',pathRewrite: {'^/pop-shared-web-components': '/'}}},// CSS Sourcemaps off by default because relative paths are "buggy"// with this option, according to the CSS-Loader README// (https://github.com/webpack/css-loader#sourcemaps)// In our experience, they generally work as expected,// just be aware of this issue when enabling this option.
// 是否生成css,map文件,上面这段英文就是说使用这个cssmap可能存在问题,但是按照经验,问题不大,可以使用 
// 给人觉得没必要用这个,css出了问题,直接控制台不就完事了cssSourceMap: false}
}

这是index.js,再说一下config下的dev.env.js和prod.env.js文件。

(1)下面是prod.env.js的配置内容module.exports = {// 作用很明显,就是导出一个对象,NODE_ENV是一个环境变量,指定production环境NODE_ENV: '"production"'}
(2)下面是dev.env.js的配置内容// 首先引入的是webpack的merge插件,该插件是用来合并对象,也就是配置文件用的,相同的选项会被后者覆盖,至于这里为什么多次一举,可能另有他图吧var merge = require('webpack-merge')// 导入prod.env.js配置文件var prodEnv = require('./prod.env')// 将两个配置对象合并,最终结果是 NODE_ENV: '"development"'module.exports = merge(prodEnv, {NODE_ENV: '"development"'})
(3)下面是proxyTable的一般用法//vue-cli使用这个功能是借助http-proxy-middleware插件,一般解决跨域请求apiproxyTable: {'/list': {target: 'http://api.xxxxxxxx.com', -> 目标url地址changeOrigin: true, -> 指示是否跨域pathRewrite: {'^/list': '/list' -> 可以使用 /list 等价于 api.xxxxxxxx.com/list}}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249868.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Business Intelligence——SSIS项目从创建到部署的简单总结(二)

在上一篇博客中,我们成功的把包导进了SQL Server中,那么接下来我们就为其创建作业,使数据库能够自动执行我们的任务。首先,我们需要启动“SQL Server 代理”。如图1:图1在“SQL Server 代理”的子节点中,选…

我的vscode配置 利用Settings Sync一键安装

{"prettier.eslintIntegration": true, // 点击保存时,根据 eslint 规则自定修复,同时集成 prettier 到 eslint 中"prettier.semi": false, //去掉代码结尾的分号"prettier.singleQuote": true, //使用带引号替代双引号&q…

IdentityServer4【QuickStart】之使用asp.net core Identity

使用asp.net core Identity IdentityServer灵活的设计中有一部分是可以将你的用户和他们的数据保存到数据库中的。如果你以一个新的用户数据库开始,那么,asp.net core Identity是一个选择。这个示例演示了如何在IdentityServer中使用asp.net core Ientit…

vue demo1

1.开发工具 试过sublime,现在转战vscode,觉得很顺手,总之啥工具习惯就好。 vscode用着不错的插件,推荐安装。 2.项目目录介绍 vue-cli生成的项目目录有点多,初看有点懵,梳理一下会好很多。 ├── ind…

mysql日志介绍

1. 错误日志 错误日志记录的事件: a. 服务器启动关闭过程中的信息 b. 服务器运行过程中的错误信息 c. 事件调试器运行一个事件时间生的信息 d. 在从服务器上启动从服务器进程时产生的信息 2. 查询日志 查询日志记录查询语句与启动时间,建议不是在调试环境…

Mac OS X终端的常用操作命令(UNIX指令)

用了十多年windows,终于换了个高配Mac,俗话说 无论前端还是后端最终还是走向了linux,无论是换了多少台PC最终都会走向Mac。不学习命令行用什么Mac? 干就完了~ pwd 显示现在的文件路径 (print working directory) ls 显示…

索引( index )

索引在庞大的数据库上最能体现出作用,所谓索引就是根据需求将指定的列提取出来做索引表,可以显著提高在查找数据方面的速度。 在索引的前提下还可以指定索引值是否唯一,索引值是单列或是多列索引。 根据索引类型,索引分为&#xf…

dependencies 和 devDependencies 区别

当我们项目需要下载一个模块的时候,我们安装npm包(在项目目录下面npm install module_name)的时候,很多时候我们会在后面加上–save-dev 或 –save。这两个参数代表什么呢? 初识 相信很多人都会回答: np…

CentOS下防御或减轻DDoS攻击方法(转)

查看攻击IP 首先使用以下代码,找出攻击者IP netstat -ntu | awk {print $5} | cut -d: -f1 | sort | uniq -c | sort -n 将会得出类似如下的结果: 1 114.226.9.132 1 174.129.237.157 1 58.60.118.142 1 Address 1 servers) 2 118.26.131.78 3 123.125.1…

iTerm2 快捷键

Ctrl a:将光标移动到命令行首 Ctrl e:将光标移动到命令行尾 Ctrl w:删除光标前的一个单词 Ctrl u:删除所有内容 Ctrl y:粘贴上次删除的内容 Ctrl r:搜索历史命令删除光标之前的单词:ctrl …

vscode - 添加背景图片

首先,CtrlShiftP安装backround , 而后重启vscode会有默认的背景图片 修改背景图,可自定义三张 具体请看gif图 最开始时,发现png根本不是全透明,用ps处理了一下(下列所有操作均字母组合) 1.1 Ctr…

架构设计杂谈004——架构师

什么是架构设师 架构师是:负责系统架构设计的人、团队或组织 架构师主要干什么 ●架构师是技术领导,领导并负责架构设计,负责做决策 ●架构师可以是团队或组织,这个时候通常会有首席架构师 ●架构师必须掌握足够的技术知识 ●架构…

学习JS基本数据类型与对象的valueOf方法

https://blog.csdn.net/licheng11403080324/article/details/60128090 https://yq.aliyun.com/articles/399499 转载于:https://www.cnblogs.com/smzd/p/9548530.html

security和oauth2.0的整合

security和oauth2.0的整合 之前已经介绍过security的相关的介绍,现在所需要做的就是security和oauth2.0的整合,在原有的基础上我们加上一些相关的代码;代码实现如下: pom.xml: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http:…

关于Vue.use()详解

问题 相信很多人在用Vue使用别人的组件时&#xff0c;会用到 Vue.use() 。例如&#xff1a;Vue.use(VueRouter)、Vue.use(MintUI)。但是用 axios时&#xff0c;就不需要用 Vue.use(axios)&#xff0c;就能直接使用。那这是为什么呐&#xff1f; 答案 因为 axios 没有 install。…

百度TTS的来由

#### https://home-assistant.io/components/tts.baidu/#### https://github.com/charleyzhu/HomeAssistant_Components#### 当前使用自定义组件 https://bbs.hassbian.com/thread-1152-1-1.html#### 2018-3-15添加百度云语音识别 - platform: baidu language: zh app_i…

eslint 禁用命令

/* eslint-disable */ ESLint 在校验的时候就会跳过后面的代码还可以在注释后加入详细规则&#xff0c;这样就能避开指定的校验规则了/* eslint-disable no-new */常用&#xff1a; rules: {"comma-dangle": ["error", "never"], //是否允许对象…

分布式工具的一次小升级⏫

前言 之前在做 秒杀架构实践 时有提到对 distributed-redis-tool 的一次小升级&#xff0c;但是没有细说。 其实主要原因是&#xff1a; 秒杀时我做压测&#xff1a;由于集成了这个限流组件&#xff0c;并发又比较大&#xff0c;所以导致连接、断开 Redis 非常频繁。 最终导致获…

浅谈vue $mount()

Vue 的$mount()为手动挂载&#xff0c;在项目中可用于延时挂载&#xff08;例如在挂载之前要进行一些其他操作、判断等&#xff09;&#xff0c;之后要手动挂载上。new Vue时&#xff0c;el和$mount并没有本质上的不同。 具体见代码&#xff1a; 顺便附上vue渲染机制流程图&a…

小三角

{border-color: transparent;border-right-color: #e5e5e5;border-width: 7px;margin-top: -7px;right: 100%;top: 20px;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none; }转载于:https://www.cnblogs.com/smz…