你的位置： >
> HTML5地理位置定位(HTML5 Geolocation)不允许定位后再次弹出用户权限提示
webapp/html5
在Safari或者中当点击“不允许”选项之后webapp/html5 的定位服务不能再次显示用户权限提示框
以下是html5关键代码：
Objective-C
&!DOCTYPE html&
&p id="demo"&点击这个按钮，获得您的坐标：&/p&
&button onclick="getLocation()"&试一下&/button&
var x=document.getElementById("demo");
function getLocation()
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(showPosition,showError);
else{x.innerHTML="Geolocation is not supported by this browser.";}
function showPosition(position)
x.innerHTML="Latitude: " + position.coords.latitude +
"&br /&Longitude: " + position.coords.
function showError(error)
switch(error.code)
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
1234567891011121314151617181920212223242526272829303132333435363738394041
&!DOCTYPE html&&html&&body&&p id="demo"&点击这个按钮，获得您的坐标：&/p&&button onclick="getLocation()"&试一下&/button&&script&var x=document.getElementById("demo");function getLocation()&&{&&if (navigator.geolocation)&&&&{&&&&navigator.geolocation.getCurrentPosition(showPosition,showError);&&&&}&&else{x.innerHTML="Geolocation is not supported by this browser.";}&&}function showPosition(position)&&{&&x.innerHTML="Latitude: " + position.coords.latitude + &&"&br /&Longitude: " + position.coords.longitude; &&}function showError(error)&&{&&switch(error.code) &&&&{&&&&case error.PERMISSION_DENIED:&&&&&&x.innerHTML="User denied the request for Geolocation."&&&&&&break;&&&&case error.POSITION_UNAVAILABLE:&&&&&&x.innerHTML="Location information is unavailable."&&&&&&break;&&&&case error.TIMEOUT:&&&&&&x.innerHTML="The request to get user location timed out."&&&&&&break;&&&&case error.UNKNOWN_ERROR:&&&&&&x.innerHTML="An unknown error occurred."&&&&&&break;&&&&}&&}&/script&&/body&&/html&
不管是原生iOS APP嵌入单个h5页面，还是都是h5页面的webapp也好，只要涉及到定位都会遇到这个情况。
当请求iOS开始定位的时候，会弹出一个提示框，提示你是否"允许"定位，允许定位继续下一步，如果一不小心点了下"不允许"之后，会发现，下次进到这个h5之后再也不会提示请求定位权限的提示框了。"不允许"被缓存了下来。再次调用geolocation会报 error.PERMISSION_DENIED 错误
而且没有相应的api能重启提示框。
解决办法很鸡肋，需要在系统中就行清理缓存的设置：
（设置）Settings -& （通用）Genera -& （重置） Reset-& （重置定位于隐私）Reset Location & Privacy.
（设置）Settings -&( 隐私）Privacy
开启 Location Services.
重新进入页面即可提示用户权限提示了！
如果说h5页面用于app中显示，可以尝试使用js与app原生交互来获取定位，原生获取定位后反传给h5，这样当整个app的定位权限被用户拒绝与开启的时候，直接到设置中对应的app下就可以恢复了。
转载请注明： &
与本文相关的文章问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
如上图所示，在chrome上面运行报这个错误，开启了允许所有网站定位还是不行。
&!DOCTYPE html&
&html lang="zh-CN"&
&meta charset="UTF-8"&
&title&Title&/title&
&script type="text/javascript"&
navigator.geolocation.getCurrentPosition(onSuccess, onError);
//GPS定位成功
function onSuccess(position) {
alert('Latitude: ' + position.coords.latitude + '\n' +
'Longitude: ' + position.coords.longitude + '\n' +
'Altitude: ' + position.coords.altitude + '\n' +
'Accuracy: ' + position.coords.accuracy + '\n' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '\n' +
'Heading: ' + position.coords.heading + '\n' +
'Speed: ' + position.coords.speed + '\n' +
'Timestamp: ' + position.timestamp + '\n');
//GPS定位失败
function onError(error) {
alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
&/html&&/code&
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
function onError(error) {
alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
switch(error.code)
alert('您拒绝了使用位置共享服务，请手动输入您的就餐地址。!');
alert('获取位置失败，请手动输入您的就餐地址。!');
这里不是告诉你了吗？error.code===1:您拒绝了使用位置共享服务，请手动输入您的就餐地址。
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：HTML5 地理定位
HTML5 地理定位
HTML5 Geolocation（地理定位）用于定位用户的位置。
定位用户的位置
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
浏览器支持
Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。
注释：对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。
HTML5 - 使用地理定位
请使用 getCurrentPosition() 方法来获得用户的位置。
下例是一个简单的地理定位实例，可返回用户位置的经度和纬度。
var x=document.getElementById(&demo&);
function getLocation()
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(showPosition);
else{x.innerHTML=&Geolocation is not supported by this browser.&;}
function showPosition(position)
x.innerHTML=&Latitude: & + position.coords.latitude +
&&br /&Longitude: & + position.coords.
例子解释：
检测是否支持地理定位
如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
showPosition() 函数获得并显示经度和纬度
上面的例子是一个非常基础的地理定位脚本，不含错误处理。
处理错误和拒绝
getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数：
function showError(error)
switch(error.code)
case error.PERMISSION_DENIED:
x.innerHTML=&User denied the request for Geolocation.&
case error.POSITION_UNAVAILABLE:
x.innerHTML=&Location information is unavailable.&
case error.TIMEOUT:
x.innerHTML=&The request to get user location timed out.&
case error.UNKNOWN_ERROR:
x.innerHTML=&An unknown error occurred.&
错误代码：
Permission denied - 用户不允许地理定位
Position unavailable - 无法获取当前位置
Timeout - 操作超时
在地图中显示结果
如需在地图中显示结果，您需要访问可使用经纬度的地图服务，比如谷歌地图或百度地图：
function showPosition(position)
var latlon=position.coords.latitude+&,&+position.coords.
var img_url=&/maps/api/staticmap?center=&
+latlon+&&zoom=14&size=400x300&sensor=false&;
document.getElementById(&mapholder&).innerHTML=&&img src='&+img_url+&' /&&;
在上例中，我们使用返回的经纬度数据在谷歌地图中显示位置（使用静态图像）。
上面的链接向您演示如何使用脚本来显示带有标记、缩放和拖曳选项的交互式地图。
给定位置的信息
本页演示的是如何在地图上显示用户的位置。不过，地理定位对于给定位置的信息同样很有用处。
更新本地信息
显示用户周围的兴趣点
交互式车载导航系统 (GPS)
getCurrentPosition() 方法 - 返回数据
若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。
coords.latitude
十进制数的纬度
coords.longitude
十进制数的经度
coords.accuracy
coords.altitude
海拔，海平面以上以米计
coords.altitudeAccuracy
位置的海拔精度
coords.heading
方向，从正北开始以度计
coords.speed
速度，以米/每秒计
响应的日期/时间
Geolocation 对象 - 其他有趣的方法
watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。
clearWatch() - 停止 watchPosition() 方法
下面的例子展示 watchPosition() 方法。您需要一台精确的 GPS 设备来测试该例（比如 iPhone）：
var x=document.getElementById(&demo&);
function getLocation()
if (navigator.geolocation)
navigator.geolocation.watchPosition(showPosition);
else{x.innerHTML=&Geolocation is not supported by this browser.&;}
function showPosition(position)
x.innerHTML=&Latitude: & + position.coords.latitude +
&&br /&Longitude: & + position.coords.升级 iOS10 后 http 网页定位失效解决方案 - 知乎专栏
{"debug":false,"apiRoot":"","paySDK":"/api/js","wechatConfigAPI":"/api/wechat/jssdkconfig","name":"production","instance":"column","tokens":{"X-XSRF-TOKEN":null,"X-UDID":null,"Authorization":"oauth c3cef7c66aa9e6a1e3160e20"}}
{"database":{"Post":{"":{"contributes":[{"sourceColumn":{"lastUpdated":,"description":"来自滴滴前端团队的周刊","permission":"COLUMN_PUBLIC","memberId":,"contributePermission":"COLUMN_PUBLIC","translatedCommentPermission":"all","canManage":true,"intro":"每周一期，为你带来最干的前端技术文章","urlToken":"ddfe-weekly","id":22906,"imagePath":"v2-b530c79b70cc82bd1c443ae.jpg","slug":"ddfe-weekly","applyReason":"0","name":"DDFE 技术周刊","title":"DDFE 技术周刊","url":"/ddfe-weekly","commentPermission":"COLUMN_ALL_CAN_COMMENT","canPost":true,"created":,"state":"COLUMN_NORMAL","followers":2666,"avatar":{"id":"v2-b530c79b70cc82bd1c443ae","template":"/{id}_{size}.jpg"},"activateAuthorRequested":false,"following":false,"imageUrl":"/v2-b530c79b70cc82bd1c443ae_l.jpg","articlesCount":42},"state":"accepted","targetPost":{"titleImage":"","lastUpdated":,"imagePath":"","permission":"ARTICLE_PUBLIC","topics":[],"summary":"本文作者钟宇飞，来自滴滴出行公共前端团队最近我们在做项目时遇到这样一个新问题，用户在升级 iOS10 后，在 http 下使用 geolocation api 会报错，控制台输出 [blocked] Access to geolocation was blocked over insecure connection to …","copyPermission":"ARTICLE_COPYABLE","translatedCommentPermission":"all","likes":0,"origAuthorId":0,"publishedTime":"T19:13:26+08:00","sourceUrl":"","urlToken":,"id":1900189,"withContent":false,"slug":,"bigTitleImage":false,"title":"升级 iOS10 后 http 网页定位失效解决方案","url":"/p/","commentPermission":"ARTICLE_ALL_CAN_COMMENT","snapshotUrl":"","created":,"comments":0,"columnId":22906,"content":"","parentId":0,"state":"ARTICLE_PUBLISHED","imageUrl":"","author":{"bio":"前端架构师","isFollowing":false,"hash":"7ca07f92642","uid":922700,"isOrg":false,"slug":"ddfe","isFollowed":false,"description":"我们是 DDFE 前端技术团队，负责滴滴出行公共前端技术方向，目前已出版《Vue.js权威指南》等著作。我们热爱技术，喜欢分享，希望对前端技术发展贡献绵薄之力。","name":"DDFE","profileUrl":"/people/ddfe","avatar":{"id":"v2-29fdf7c4d03","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},"memberId":,"excerptTitle":"","voteType":"ARTICLE_VOTE_CLEAR"},"id":492104}],"title":"升级 iOS10 后 http 网页定位失效解决方案","author":"ddfe","content":"本文作者钟宇飞，来自滴滴出行公共前端团队最近我们在做项目时遇到这样一个新问题，用户在升级 iOS10 后，在 http 下使用 geolocation api 会报错，控制台输出 [blocked] Access to geolocation was blocked over insecure connection to 。原来是 iOS10 下的 Safari 不再支持 http 网页里调用 geolocation 了。如此，我们之前在 http 下使用 geolocation api 的应用就无法正常使用，怎么解决呢？一劳永逸：全站切换 httpsiOS10 下的 http 网页禁止了 geolocation api 的调用，原因就是出于安全考虑，这时只要升级到 https 协议即可正常使用 geolocation api 。这是最推荐的解决方案，因为从大趋势看，众多浏览器厂商都在开始纷纷禁止 http 下调用 geolocation ，所以为了一劳永逸地避免无法定位的问题，建议全站切换 https 。但是我们有的应用并不能立即切换到 https，且仍需要兼容 http 下的使用，那这个时候怎么办呢？兼容方案：借助地图厂商 api目前可以用各大地图厂商（如腾讯地图、百度地图、谷歌地图）提供的 api 来帮助我们解决这个问题。下面我们来详细了解一下各个地图的定位服务调用方式：腾讯地图引入腾讯地图前端定位组件&script type=\"text/javascript\" src=\"/lightmap/components/geolocation/geolocation.min.js\"&&/script&\n调用apivar geolocation = new qq.maps.Geolocation(\"OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77\", \"myapp\");\n\ngeolocation.getLocation(showPosition, showErr);\n\nfunction showPosition(result) {\n
console.log('您的位置：'+ result.lng + ',' + result.lat );\n};\n \nfunction showErr(err) {\n
console.log(err)\n};\n百度地图引入百度地图（百度地图不像腾讯地图单独有一个定位组件，所以需要引入整个地图的 js-sdk）&script type=\"text/javascript\" src=\"http://api./api?v=2.0&ak=您的密钥\"&&/script&\n调用 apivar geolocation = new BMap.Geolocation();\ngeolocation.getCurrentPosition(function(result){\n
if(this.getStatus() == window.BMAP_STATUS_SUCCESS){\n
console.log('您的位置：' + result.point.lng + ',' + result.point.lat );\n
} else {\n
console.log('failed:'+this.getStatus());\n
\n},{enableHighAccuracy: true})\n高德地图引入高德地图（也是要进入整个 js-sdk，由于高德是采用 plugin 的形式调用定位功能，所以需要预先把地图 DOM 加载进页面中。）&head&\n
&script type=\"text/javascript\" src=\"/maps?v=1.3&key=您申请的key值\"&&/script&\n&/head&\n&body&\n
&div id=\"container\"&&/div&\n&/body&\n调用 apivar map, geolocation;\n
//加载地图，调用浏览器定位服务\n
map = new AMap.Map('container', {\n
resizeEnable: true\n
map.plugin('AMap.Geolocation', function() {\n
geolocation = new AMap.Geolocation();\n
geolocation.getCurrentPosition();\n
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息\n
AMap.event.addListener(geolocation, 'error', onError);
//返回定位出错信息\n
//解析定位结果\n
function onComplete(data) {\n
console.log('您的位置：' + result.position.lng + ',' + result.position.lat );\n
//解析定位错误信息\n
function onError(error) {\n
console.log(error)\n
}\n四种定位方式返回的数据区别整合方案整合方案从上述介绍中我们发现，各大地图的调用方式和返回格式都不同，针对这个问题，我自己写了一个工具geo-for-http，提供腾讯地图、百度地图、高德地图的定位服务替代原生HTML5失效的定位功能，帮助你在 iOS10 下的http能正常使用定位。整体的设计思路就是：三个统一：统一注册方式、统一调用方式、统一数据返回格式。具体使用方式请戳下面链接，欢迎吐槽提意见~传送门：","updated":"T11:13:26.000Z","canComment":false,"commentPermission":"anyone","commentCount":0,"collapsedCount":0,"likeCount":11,"state":"published","isLiked":false,"slug":"","isTitleImageFullScreen":false,"rating":"none","titleImage":"","links":{"comments":"/api/posts//comments"},"reviewers":[],"topics":[{"url":"/topic/","id":"","name":"HTTP"},{"url":"/topic/","id":"","name":"地图"}],"adminClosedComment":false,"titleImageSize":{"width":0,"height":0},"href":"/api/posts/","excerptTitle":"","column":{"slug":"ddfe-weekly","name":"DDFE 技术周刊"},"tipjarState":"inactivated","annotationAction":[],"sourceUrl":"","pageCommentsCount":0,"hasPublishingDraft":false,"snapshotUrl":"","publishedTime":"T19:13:26+08:00","url":"/p/","lastestLikers":[{"bio":"开发","isFollowing":false,"hash":"defe530d18a684d302d96f268c4f67a0","uid":296300,"isOrg":false,"slug":"sysmenu","isFollowed":false,"description":"","name":"sysmenu","profileUrl":"/people/sysmenu","avatar":{"id":"da8e974dc","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},{"bio":"IT 大学生","isFollowing":false,"hash":"f906a5e29fbee49aa89e22","uid":116700,"isOrg":false,"slug":"wangziaaa","isFollowed":false,"description":"","name":"笋干包扎","profileUrl":"/people/wangziaaa","avatar":{"id":"v2-ee09d399ff14e3a9e03498","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},{"bio":"今天扯点什么？","isFollowing":false,"hash":"ddfd75a3e05e4ced2a027c","uid":221200,"isOrg":false,"slug":"cheng-yan-zhao-82","isFollowed":false,"description":"这个人比较懒，什么夜没留下。","name":"胡扯","profileUrl":"/people/cheng-yan-zhao-82","avatar":{"id":"da8e974dc","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},{"bio":"开心就好","isFollowing":false,"hash":"c5d2b4a6f91","uid":12,"isOrg":false,"slug":"wu-qi-75-82","isFollowed":false,"description":"有点抑郁的大叔","name":"此木为柴","profileUrl":"/people/wu-qi-75-82","avatar":{"id":"5f6a8d300e706d8edaad9d","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},{"bio":"IT民","isFollowing":false,"hash":"f8f92dfa3eee81aee78d6","uid":812100,"isOrg":false,"slug":"di-yi-se","isFollowed":false,"description":"","name":"地一色","profileUrl":"/people/di-yi-se","avatar":{"id":"da8e974dc","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false}],"summary":"本文作者钟宇飞，来自滴滴出行公共前端团队最近我们在做项目时遇到这样一个新问题，用户在升级 iOS10 后，在 http 下使用 geolocation api 会报错，控制台输出 [blocked] Access to geolocation was blocked over insecure connection to …","reviewingCommentsCount":0,"meta":{"previous":{"isTitleImageFullScreen":false,"rating":"none","titleImage":"/50/v2-eafeeea2e0ba7b5b201e_xl.jpg","links":{"comments":"/api/posts//comments"},"topics":[{"url":"/topic/","id":"","name":"前端开发"}],"adminClosedComment":false,"href":"/api/posts/","excerptTitle":"","author":{"bio":"前端架构师","isFollowing":false,"hash":"7ca07f92642","uid":922700,"isOrg":false,"slug":"ddfe","isFollowed":false,"description":"我们是 DDFE 前端技术团队，负责滴滴出行公共前端技术方向，目前已出版《Vue.js权威指南》等著作。我们热爱技术，喜欢分享，希望对前端技术发展贡献绵薄之力。","name":"DDFE","profileUrl":"/people/ddfe","avatar":{"id":"v2-29fdf7c4d03","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},"column":{"slug":"ddfe-weekly","name":"DDFE 技术周刊"},"content":"Vue业界新闻CanvasCSSJavaScriptReactSVGWebpack开源工具应用推荐工程经验Node.js微信小程序跨端其他","state":"published","sourceUrl":"","pageCommentsCount":0,"canComment":false,"snapshotUrl":"","slug":,"publishedTime":"T18:51:35+08:00","url":"/p/","title":"DDFE 技术周刊（第五期）","summary":"Vue 业界新闻Canvas","reviewingCommentsCount":0,"meta":{"previous":null,"next":null},"commentPermission":"anyone","commentsCount":2,"likesCount":9},"next":{"isTitleImageFullScreen":false,"rating":"none","titleImage":"","links":{"comments":"/api/posts//comments"},"topics":[{"url":"/topic/","id":"","name":"webpack"},{"url":"/topic/","id":"","name":"Vue.js"}],"adminClosedComment":false,"href":"/api/posts/","excerptTitle":"","author":{"bio":"前端架构师","isFollowing":false,"hash":"7ca07f92642","uid":922700,"isOrg":false,"slug":"ddfe","isFollowed":false,"description":"我们是 DDFE 前端技术团队，负责滴滴出行公共前端技术方向，目前已出版《Vue.js权威指南》等著作。我们热爱技术，喜欢分享，希望对前端技术发展贡献绵薄之力。","name":"DDFE","profileUrl":"/people/ddfe","avatar":{"id":"v2-29fdf7c4d03","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},"column":{"slug":"ddfe-weekly","name":"DDFE 技术周刊"},"content":"滴滴公共前端团队 - 王宏宇前言作为 Vue 的使用者我们对于 vue-cli 都很熟悉，但是对它的 webpack 配置我们可能关注甚少，今天我们为大家带来 vue-cli#2.0 的 webpack 配置分析vue-cli 的简介、安装我们不在这里赘述，对它还不熟悉的同学可以直接访问
查看目录结构.\n├── README.md\n├── build\n│
├── build.js\n│
├── check-versions.js\n│
├── dev-client.js\n│
├── dev-server.js\n│
├── utils.js\n│
├── webpack.base.conf.js\n│
├── webpack.dev.conf.js\n│
└── webpack.prod.conf.js\n├── config\n│
├── dev.env.js\n│
├── index.js\n│
└── prod.env.js\n├── index.html\n├── package.json\n├── src\n│
├── App.vue\n│
├── assets\n│
└── logo.png\n│
├── components\n│
└── Hello.vue\n│
└── main.js\n└── static\n本篇文章的主要关注点在 build - 编译任务的代码config - webpack 的配置文件package.json - 项目的基本信息入口从 package.json 中我们可以看到\"scripts\": {\n
\"dev\": \"node build/dev-server.js\",\n
\"build\": \"node build/build.js\",\n
\"lint\": \"eslint --ext .js,.vue src\"\n}\n当我们执行 npm run dev / npm run build 时运行的是 node build/dev-server.js 或 node build/build.jsdev-server.js让我们先从 build/dev-server.js 入手require('./check-versions')() // 检查 Node 和 npm 版本\nvar config = require('../config') // 获取 config/index.js 的默认配置\n\n/* \n** 如果 Node 的环境无法判断当前是 dev / product 环境\n** 使用 config.dev.env.NODE_ENV 作为当前的环境\n*/\n\nif (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)\nvar path = require('path') // 使用 NodeJS 自带的文件路径工具\nvar express = require('express') // 使用 express\nvar webpack = require('webpack') // 使用 webpack\nvar opn = require('opn') // 一个可以强制打开浏览器并跳转到指定 url 的插件\nvar proxyMiddleware = require('http-proxy-middleware') // 使用 proxyTable \nvar webpackConfig = require('./webpack.dev.conf') // 使用 dev 环境的 webpack 配置\n\n// default port where dev server listens for incoming traffic\n/* 如果没有指定运行端口，使用 config.dev.port 作为运行端口 */\nvar port = process.env.PORT || config.dev.port\n// Define HTTP proxies to your custom API backend\n// /chimurai/http-proxy-middleware\n/* 使用 config.dev.proxyTable 的配置作为 proxyTable 的代理配置 */\nvar proxyTable = config.dev.proxyTable\n\n/* 使用 express 启动一个服务 */\nvar app = express()\nvar compiler = webpack(webpackConfig) // 启动 webpack 进行编译\n\n/* 启动 webpack-dev-middleware，将 编译后的文件暂存到内存中 */\nvar devMiddleware = require('webpack-dev-middleware')(compiler, {\n
publicPath: webpackConfig.output.publicPath,\n
stats: {\n
colors: true,\n
chunks: false\n
}\n})\n\n/* 启动 webpack-hot-middleware，也就是我们常说的 Hot-reload */\nvar hotMiddleware = require('webpack-hot-middleware')(compiler)\n// force page reload when html-webpack-plugin template changes\ncompiler.plugin('compilation', function (compilation) {\n
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {\n
hotMiddleware.publish({ action: 'reload' })\n
})\n})\n\n// proxy api requests\n// 将 proxyTable 中的请求配置挂在到启动的 express 服务上\nObject.keys(proxyTable).forEach(function (context) {\n
var options = proxyTable[context]\n
if (typeof options === 'string') {\n
options = { target: options }\n
app.use(proxyMiddleware(context, options))\n})\n\n// handle fallback for HTML5 history API\n// 使用 connect-history-api-fallback 匹配资源，如果不匹配就可以重定向到指定地址\napp.use(require('connect-history-api-fallback')())\n\n// serve webpack bundle output\n// 将暂存到内存中的 webpack 编译后的文件挂在到 express 服务上\napp.use(devMiddleware)\n\n// enable hot-reload and state-preserving\n// compilation error display\n// 将 Hot-reload 挂在到 express 服务上\napp.use(hotMiddleware)\n\n// serve pure static assets\n// 拼接 static 文件夹的静态资源路径\nvar staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)\n// 为静态资源提供响应服务\napp.use(staticPath, express.static('./static'))\n\n// 让我们这个 express 服务监听 port 的请求，并且将此服务作为 dev-server.js 的接口暴露\nmodule.exports = app.listen(port, function (err) {\n
if (err) {\n
console.log(err)\n
var uri = 'http://localhost:' + port\n
console.log('Listening at ' + uri + '\\n')\n\n
// when env is testing, don't need open it\n
// 如果不是测试环境，自动打开浏览器并跳到我们的开发地址\n
if (process.env.NODE_ENV !== 'testing') {\n
opn(uri)\n
}\n})\nwebpack.dev.conf.js刚刚我们在 dev-server.js 中用到了 webpack.dev.conf.js 和 index.js，我们先来看一下 webpack.dev.conf.jsvar config = require('../config') // 同样的使用了 config/index.js\nvar webpack = require('webpack') // 使用 webpack\nvar merge = require('webpack-merge') // 使用 webpack 配置合并插件\nvar utils = require('./utils') // 使用一些小工具\nvar baseWebpackConfig = require('./webpack.base.conf') // 加载 webpack.base.conf\n/* 使用 html-webpack-plugin 插件，这个插件可以帮我们自动生成 html 并且注入到 .html 文件中 */\nvar HtmlWebpackPlugin = require('html-webpack-plugin') \n\n// add hot-reload related code to entry chunks\n// 将 Hol-reload 相对路径添加到 webpack.base.conf 的 对应 entry 前\nObject.keys(baseWebpackConfig.entry).forEach(function (name) {\n
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])\n})\n\n/* 将我们 webpack.dev.conf.js 的配置和 webpack.base.conf.js 的配置合并 */\nmodule.exports = merge(baseWebpackConfig, {\n
module: {\n
// 使用 styleLoaders\n
loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })\n
// eval-source-map is faster for development\n
// 使用 #eval-source-map 模式作为开发工具，此配置可参考 DDFE 往期文章详细了解\n
devtool: '#eval-source-map',\n
plugins: [\n
/* definePlugin 接收字符串插入到代码当中, 所以你需要的话可以写上 JS 的字符串 */\n
new webpack.DefinePlugin({\n
'process.env': config.dev.env\n
// /glenjamin/webpack-hot-middleware#installation--usage\n
new webpack.optimize.OccurenceOrderPlugin(),\n
/* HotModule 插件在页面进行变更的时候只会重回对应的页面模块，不会重绘整个 html 文件 */\n
new webpack.HotModuleReplacementPlugin(),\n
/* 使用了 NoErrorsPlugin 后页面中的报错不会阻塞，但是会在编译结束后报错 */\n
new webpack.NoErrorsPlugin(),\n
// /ampedandwired/html-webpack-plugin\n
/* 将 index.html 作为入口，注入 html 代码后生成 index.html文件 */\n
new HtmlWebpackPlugin({\n
filename: 'index.html',\n
template: 'index.html',\n
inject: true\n
]\n})\nwebpack.base.conf.js我们看到在 webpack.dev.conf.js 中又引入了 webpack.base.conf.js， 它看起来很重要的样子，所以我们只能在下一章来看看 config/index.js 了 （摊手）var path = require('path') // 使用 NodeJS 自带的文件路径插件\nvar config = require('../config') // 引入 config/index.js\nvar utils = require('./utils') // 引入一些小工具\nvar projectRoot = path.resolve(__dirname, '../') // 拼接我们的工作区路径为一个绝对路径\n\n/* 将 NodeJS 环境作为我们的编译环境 */\nvar env = process.env.NODE_ENV\n// check env & config/index.js to decide weither to enable CSS Sourcemaps for the\n// various preprocessor loaders added to vue-loader at the end of this file\n/* 是否在 dev 环境下开启 cssSourceMap ，在 config/index.js 中可配置 */\nvar cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)\n/* 是否在 production 环境下开启 cssSourceMap ，在 config/index.js 中可配置 */\nvar cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)\n/* 最终是否使用 cssSourceMap */\nvar useCssSourceMap = cssSourceMapDev || cssSourceMapProd\n\nmodule.exports = {\n
entry: {\n
app: './src/main.js' // 编译文件入口\n
output: {\n
path: config.build.assetsRoot, // 编译输出的静态资源根路径\n
publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, // 正式发布环境下编译输出的上线路径的根路径\n
filename: '[name].js' // 编译输出的文件名\n
resolve: {\n
// 自动补全的扩展名\n
extensions: ['', '.js', '.vue'],\n
// 不进行自动补全或处理的文件或者文件夹\n
fallback: [path.join(__dirname, '../node_modules')],\n
alias: {\n
// 默认路径代理，例如 import Vue from 'vue'，会自动到 'vue/mon.js'中寻找\n
'vue$': 'vue/mon.js',\n
'src': path.resolve(__dirname, '../src'),\n
'assets': path.resolve(__dirname, '../src/assets'),\n
'components': path.resolve(__dirname, '../src/components')\n
resolveLoader: {\n
fallback: [path.join(__dirname, '../node_modules')]\n
module: {\n
preLoaders: [\n
// 预处理的文件及使用的 loader\n
test: /\\.vue$/,\n
loader: 'eslint',\n
include: projectRoot,\n
exclude: /node_modules/\n
test: /\\.js$/,\n
loader: 'eslint',\n
include: projectRoot,\n
exclude: /node_modules/\n
loaders: [\n
// 需要处理的文件及使用的 loader\n
test: /\\.vue$/,\n
loader: 'vue'\n
test: /\\.js$/,\n
loader: 'babel',\n
include: projectRoot,\n
exclude: /node_modules/\n
test: /\\.json$/,\n
loader: 'json'\n
test: /\\.(png|jpe?g|gif|svg)(\\?.*)?$/,\n
loader: 'url',\n
query: {\n
limit: 10000,\n
name: utils.assetsPath('img/[name].[hash:7].[ext]')\n
test: /\\.(woff2?|eot|ttf|otf)(\\?.*)?$/,\n
loader: 'url',\n
query: {\n
limit: 10000,\n
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')\n
eslint: {\n
// eslint 代码检查配置工具\n
formatter: require('eslint-friendly-formatter')\n
// .vue 文件配置 loader 及工具 (autoprefixer)\n
loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),\n
postcss: [\n
require('autoprefixer')({\n
browsers: ['last 2 versions']\n
}\n}\nconfig/index.js终于分析完了 webpack.base.conf.js，来让我们看一下 config/index.js index.js 中有 dev 和 production 两种环境的配置// see http://vuejs-templates.github.io/webpack for documentation.\n// 不再重复介绍了 ...\nvar path = require('path')\n\nmodule.exports = {\n
build: { // production 环境\n
env: require('./prod.env'), // 使用 config/prod.env.js 中定义的编译环境\n
index: path.resolve(__dirname, '../dist/index.html'), // 编译输入的 index.html 文件\n
assetsRoot: path.resolve(__dirname, '../dist'), // 编译输出的静态资源路径\n
assetsSubDirectory: 'static', // 编译输出的二级目录\n
assetsPublicPath: '/', // 编译发布的根目录，可配置为资源服务器域名或 CDN 域名\n
productionSourceMap: true, // 是否开启 cssSourceMap\n
// Gzip off by default as many popular static hosts such as\n
// Surge or Netlify already gzip all static assets for you.\n
// Before setting to `true`, make sure to:\n
// npm install --save-dev compression-webpack-plugin\n
productionGzip: false, // 是否开启 gzip\n
productionGzipExtensions: ['js', 'css'] // 需要使用 gzip 压缩的文件扩展名\n
dev: { // dev 环境\n
env: require('./dev.env'), // 使用 config/dev.env.js 中定义的编译环境\n
port: 8080, // 运行测试页面的端口\n
assetsSubDirectory: 'static', // 编译输出的二级目录\n
assetsPublicPath: '/', // 编译发布的根目录，可配置为资源服务器域名或 CDN 域名\n
proxyTable: {}, // 需要 proxyTable 代理的接口（可跨域）\n
// CSS Sourcemaps off by default because relative paths are \"buggy\"\n
// with this option, according to the CSS-Loader README\n
// (/webpack/css-loader#sourcemaps)\n
// In our experience, they generally work as expected,\n
// just be aware of this issue when enabling this option.\n
cssSourceMap: false // 是否开启 cssSourceMap\n
}\n}\n至此，我们的 npm run dev 命令就讲解完毕，下面让我们来看一看执行 npm run build 命令时发生了什么 ～build.js// /shelljs/shelljs\nrequire('./check-versions')() // 检查 Node 和 npm 版本\nrequire('shelljs/global') // 使用了 shelljs 插件，可以让我们在 node 环境的 js 中使用 shell\nenv.NODE_ENV = 'production'\n\nvar path = require('path') // 不再赘述\nvar config = require('../config') // 加载 config.js\nvar ora = require('ora') // 一个很好看的 loading 插件\nvar webpack = require('webpack') // 加载 webpack\nvar webpackConfig = require('./webpack.prod.conf') // 加载 webpack.prod.conf\n\nconsole.log( //
输出提示信息 ～ 提示用户请在 http 服务下查看本页面，否则为空白页\n
Tip:\\n' +\n
Built files are meant to be served over an HTTP server.\\n' +\n
Opening index.html over file:// won\\'t work.\\n'\n)\n\nvar spinner = ora('building for production...') // 使用 ora 打印出 loading + log\nspinner.start() // 开始 loading 动画\n\n/* 拼接编译输出文件路径 */\nvar assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)\n/* 删除这个文件夹 （递归删除） */\nrm('-rf', assetsPath)\n/* 创建此文件夹 */ \nmkdir('-p', assetsPath)\n/* 复制 static 文件夹到我们的编译输出目录 */\ncp('-R', 'static/*', assetsPath)\n\n//
开始 webpack 的编译\nwebpack(webpackConfig, function (err, stats) {\n
// 编译成功的回调函数\n
spinner.stop()\n
if (err) throw err\n
process.stdout.write(stats.toString({\n
colors: true,\n
modules: false,\n
children: false,\n
chunks: false,\n
chunkModules: false\n
}) + '\\n')\n})\nwebpack.prod.conf.jsvar path = require('path') // 不再赘述\nvar config = require('../config') // 加载 confi.index.js\nvar utils = require('./utils') // 使用一些小工具\nvar webpack = require('webpack') // 加载 webpack\nvar merge = require('webpack-merge') // 加载 webpack 配置合并工具\nvar baseWebpackConfig = require('./webpack.base.conf') // 加载 webpack.base.conf.js\n/* 一个 webpack 扩展，可以提取一些代码并且将它们和文件分离开 */ \n/* 如果我们想将 webpack 打包成一个文件 css js 分离开，那我们需要这个插件 */\nvar ExtractTextPlugin = require('extract-text-webpack-plugin')\n/* 一个可以插入 html 并且创建新的 .html 文件的插件 */\nvar HtmlWebpackPlugin = require('html-webpack-plugin')\nvar env = config.build.env\n\n/* 合并 webpack.base.conf.js */\nvar webpackConfig = merge(baseWebpackConfig, {\n
module: {\n
/* 使用的 loader */\n
loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })\n
/* 是否使用 #source-map 开发工具，更多信息可以查看 DDFE 往期文章 */\n
devtool: config.build.productionSourceMap ? '#source-map' : false,\n
output: {\n
/* 编译输出目录 */\n
path: config.build.assetsRoot,\n
/* 编译输出文件名 */\n
filename: utils.assetsPath('js/[name].[chunkhash].js'), // 我们可以在 hash 后加 :6 决定使用几位 hash 值\n
// 没有指定输出名的文件输出的文件名\n
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')\n
/* 编译 .vue 文件时使用的 loader */\n
loaders: utils.cssLoaders({\n
sourceMap: config.build.productionSourceMap,\n
extract: true\n
plugins: [\n
/* 使用的插件 */\n
// http://vuejs.github.io/vue-loader/en/workflow/production.html\n
/* definePlugin 接收字符串插入到代码当中, 所以你需要的话可以写上 JS 的字符串 */\n
new webpack.DefinePlugin({\n
'process.env': env\n
/* 压缩 js (同样可以压缩 css) */\n
new webpack.optimize.UglifyJsPlugin({\n
compress: {\n
warnings: false\n
new webpack.optimize.OccurrenceOrderPlugin(),\n
// extract css into its own file\n
/* 将 css 文件分离出来 */\n
new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),\n
// generate dist index.html with correct asset hash for caching.\n
// you can customize output by editing /index.html\n
// see /ampedandwired/html-webpack-plugin\n
/* 输入输出的 .html 文件 */\n
new HtmlWebpackPlugin({\n
filename: config.build.index,\n
template: 'index.html',\n
inject: true, // 是否注入 html\n
minify: { // 压缩的方式\n
removeComments: true,\n
collapseWhitespace: true,\n
removeAttributeQuotes: true\n
// more options:\n
// /kangax/html-minifier#options-quick-reference\n
// necessary to consistently work with multiple chunks via CommonsChunkPlugin\n
chunksSortMode: 'dependency'\n
// split vendor js into its own file\n
/* 没有指定输出文件名的文件输出的静态文件名 */\n
new webpack.optimize.CommonsChunkPlugin({\n
name: 'vendor',\n
minChunks: function (module, count) {\n
// any required modules inside node_modules are extracted to vendor\n
return (\n
module.resource &&\n
/\\.js$/.test(module.resource) &&\n
module.resource.indexOf(\n
path.join(__dirname, '../node_modules')\n
// extract webpack runtime and module manifest to its own file in order to\n
// prevent vendor hash from being updated whenever app bundle is updated\n
/* 没有指定输出文件名的文件输出的静态文件名 */\n
new webpack.optimize.CommonsChunkPlugin({\n
name: 'manifest',\n
chunks: ['vendor']\n
]\n})\n\n/* 开启 gzip 的情况下使用下方的配置 */\nif (config.build.productionGzip) {\n
/* 加载 compression-webpack-plugin 插件 */\n
var CompressionWebpackPlugin = require('compression-webpack-plugin')\n
/* 向webpackconfig.plugins中加入下方的插件 */\n
webpackConfig.plugins.push(\n
/* 使用 compression-webpack-plugin 插件进行压缩 */\n
new CompressionWebpackPlugin({\n
asset: '[path].gz[query]',\n
algorithm: 'gzip',\n
test: new RegExp(\n
'\\\\.(' +\n
config.build.productionGzipExtensions.join('|') +\n
threshold: 10240,\n
minRatio: 0.8\n
)\n}\n\nmodule.exports = webpackConfig\n总结至此 ～ 我们的 vue-cli#2.0 webpack 配置分析文件就讲解完毕 ～对于一些插件的详细 options 我们没有进行讲解，感兴趣的同学可以去 npm 商店搜索对应插件查看 options ~更多内容欢迎扫码关注 DDFE 公众号~","state":"published","sourceUrl":"","pageCommentsCount":0,"canComment":false,"snapshotUrl":"","slug":,"publishedTime":"T15:14:31+08:00","url":"/p/","title":"vue-cli#2.0 webpack 配置分析","summary":"滴滴公共前端团队 - 王宏宇前言作为 Vue 的使用者我们对于 vue-cli 都很熟悉，但是对它的 webpack 配置我们可能关注甚少，今天我们为大家带来 vue-cli#2.0 的 webpack 配置分析vue-cli 的简介、安装我们不在这里赘述，对它还不熟悉的同学可以直接访问 …","reviewingCommentsCount":0,"meta":{"previous":null,"next":null},"commentPermission":"anyone","commentsCount":14,"likesCount":92}},"annotationDetail":null,"commentsCount":0,"likesCount":11,"FULLINFO":true}},"User":{"ddfe":{"isFollowed":false,"name":"DDFE","headline":"我们是 DDFE 前端技术团队，负责滴滴出行公共前端技术方向，目前已出版《Vue.js权威指南》等著作。我们热爱技术，喜欢分享，希望对前端技术发展贡献绵薄之力。","avatarUrl":"/v2-29fdf7c4d03_s.jpg","isFollowing":false,"type":"people","slug":"ddfe","bio":"前端架构师","hash":"7ca07f92642","uid":922700,"isOrg":false,"description":"我们是 DDFE 前端技术团队，负责滴滴出行公共前端技术方向，目前已出版《Vue.js权威指南》等著作。我们热爱技术，喜欢分享，希望对前端技术发展贡献绵薄之力。","profileUrl":"/people/ddfe","avatar":{"id":"v2-29fdf7c4d03","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false,"badge":{"identity":null,"bestAnswerer":null}}},"Comment":{},"favlists":{}},"me":{},"global":{"experimentFeatures":{"ge3":"ge3_9","ge2":"ge2_1","isOffice":"false","nwebStickySidebar":"sticky","qrcodeLogin":"qrcode","favAct":"default","default":"None","mobileQaPageProxyHeifetz":"m_qa_page_nweb","newMore":"new","newBuyBar":"livenewbuy3","newMobileColumnAppheader":"new_header","appStoreRateDialog":"close","sendZaMonitor":"true","homeUi2":"default","answerRelatedReadings":"qa_recommend_with_ads_and_article","wechatShareModal":"wechat_share_modal_show","iOSNewestVersion":"4.2.0","qaStickySidebar":"sticky_sidebar","androidProfilePanel":"panel_b","liveStore":"ls_a2_b2_c1_f2","zcmLighting":"zcm"}},"columns":{"next":{},"ddfe-weekly":{"following":false,"canManage":false,"href":"/api/columns/ddfe-weekly","name":"DDFE 技术周刊","creator":{"slug":"ddfe"},"url":"/ddfe-weekly","slug":"ddfe-weekly","avatar":{"id":"v2-b530c79b70cc82bd1c443ae","template":"/{id}_{size}.jpg"}}},"columnPosts":{},"columnSettings":{"colomnAuthor":[],"uploadAvatarDetails":"","contributeRequests":[],"contributeRequestsTotalCount":0,"inviteAuthor":""},"postComments":{},"postReviewComments":{"comments":[],"newComments":[],"hasMore":true},"favlistsByUser":{},"favlistRelations":{},"promotions":{},"switches":{"couldAddVideo":false},"draft":{"titleImage":"","titleImageSize":{},"isTitleImageFullScreen":false,"canTitleImageFullScreen":false,"title":"","titleImageUploading":false,"error":"","content":"","draftLoading":false,"globalLoading":false,"pendingVideo":{"resource":null,"error":null}},"drafts":{"draftsList":[],"next":{}},"config":{"userNotBindPhoneTipString":{}},"recommendPosts":{"articleRecommendations":[],"columnRecommendations":[]},"env":{"edition":{},"isAppView":false,"appViewConfig":{"content_padding_top":128,"content_padding_bottom":56,"content_padding_left":16,"content_padding_right":16,"title_font_size":22,"body_font_size":16,"is_dark_theme":false,"can_auto_load_image":true,"app_info":"OS=iOS"},"isApp":false},"sys":{},"message":{"newCount":0},"pushNotification":{"newCount":0}}}