break—-用return false; continue --用return true; 代码如下： Object.keys(flatMenuData).forEach((key) => { if (item.routeName === this.$route.name && !rs.activeItem) { //如果开启了首页不展示左侧菜单，则屏蔽左侧菜单 if(this.inner_sideMenu.opt.notActiveIndex){ if(this.$route.name ==’index'){ return true } } } } ———————————————— 版权声明：本文为CSDN博主「CarryBest」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/carrybest/article/details/89000582
View Details一、前提 工程文件目录 |- mock |- node_modules |- public |- src |-- api |-- assets |-- components |-- router |-- store |-- style |-- test1.scss |-- test1_main.scss |-- utils |-- views |-- static_test |-- test1.scss |-- App.vue |-- main.js 二、背景图的引用 背景图样式直接写在element的style属性里 直接在html模板里，在dom对象的style里加背景图，不起效果，代码如下：
|
1 2 3 |
<div style="height:100px; background:url('../../assets/img/bg.png') center top no-repeat"> 不起效果。。。 </div> |
背景样式class写在vue文件的style标签里 写法： background: url('图片相对当前的路径') center top no-repeat
|
1 2 3 4 5 6 7 8 |
<el-card class="box-card sudoku_item"> <div slot="header" class="clearfix"> <span>背景图写在css里</span> </div> <div class='testBackground'> 起效果。。。 </div> </el-card> |
|
1 2 3 4 5 6 |
<style lang="scss" scoped> .testBackground { height: 100px; background: url('../../assets/img/bg.png') center top no-repeat } </style> |
编译后的css：
|
1 2 3 4 |
.testBackground[data-v-eb2b930e] { height: 100px; background: url(../img/bg.187d48cd.png) top no-repeat; } |
背景样式class写在样式文件里，在vue文件里引入样式文件 样式写法：
|
1 |
background: url('图片相对当前vue文件的路径') center top no-repeat |
这个图片路径很重要，url是图片相对于当前vue文件的路径，而不是图片相对于样式文件的路径。 html写法， /views/static_test/test1.vue:
|
1 2 3 4 5 6 7 8 |
<el-card class="box-card sudoku_item"> <div slot="header" class="clearfix"> <span>背景图写在style file里</span> </div> <div class='testBackground_file'> 起效果。。。 </div> </el-card> |
样式写法， /style/test1.scss：
|
1 2 3 4 |
.testBackground_file { height: 100px; background: url('../../assets/img/bg.png') center top no-repeat } |
/views/static_test/test1.vue，引入样式文件写法：
|
1 2 3 |
<style lang="scss" scoped> @import "../../style/test1.scss"; </style> |
编译后：
|
1 2 3 4 |
.testBackground_file[data-v-eb2b930e] { height: 100px; background: url(../img/bg.187d48cd.png) top no-repeat; } |
背景样式class写在样式文件里，在main.js里引入样式文件 html写法， /views/static_test/test1.vue:
|
1 2 3 4 5 6 7 8 |
<el-card class="box-card sudoku_item"> <div slot="header" class="clearfix"> <span>背景图写在style file里</span> </div> <div class='testBackground_file_main'> 起效果。。。 </div> </el-card> |
样式写法, /style/test1_main.scss：
|
1 2 3 4 |
.testBackground_file_main { height: 100px; background: url('../assets/img/bg.png') center top no-repeat } |
请注意，url是main.js相对于图片文件的路径。 引入样式文件方法，main.js：
|
1 2 |
// style import './style/test1_main.scss' |
[…]
View Details我们知道css中text-indent属性可以使每个段落首行开头文字缩进，如缩进2个文字距离样式。 p{ text-indent: 2em; /*em是相对单位*/ } 注：em是相对长度单位。相对于当前对象内文本的字体尺寸。我们中文段落一般每段前空两个汉字。实际上，就是首行缩进了2em。 那如果我们想让第二行缩进一格呢： p { text-indent: -2em; margin-left: 2em; } 设置text-indent: -2em;以后p标签中第一行文字向左偏移，这样第二行开始的文字就等于缩进了， 但是这样设置会导致第一行向左超出div，所以再用margin-left使p标签整体右移即可， 不过也可以用 padding-left:2em ，这样IE8里也能显示。 from:https://www.cnblogs.com/lvyeconghua/p/9375817.html
View Details运行: cnpm i cross-env --save-dev from:https://www.cnblogs.com/linsx/p/9353429.html
View Detailsiframe：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe iframe 内容加载后不改变 使用：onload="this.height=this.contentWindow.document.documentElement.scrollHeight" 例如：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>自适应高度</h1> <iframe srcdoc='<div style="height: 400px;width: 400px;background: #ddd;"></div>' frameborder="1" scrolling="no" width="100%" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe> <h1>非自适应高度</h1> <iframe srcdoc='<div style="height: 400px;width: 400px;background: #ddd;"></div>' frameborder="1" scrolling="no" width="100%"></iframe> </body> </html> |
iframe 内容加载后改变 定时改变 iframe 高度：
|
1 2 3 |
setInterval(()=>{ document.querySelector('iframe').height = window.frames[0].document.documentElement.scrollHeight; }, 200); |
例如：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>自适应高度</h1> <iframe srcdoc='<button onclick="this.parentNode.appendChild(this.cloneNode())" style="width: 100px; height: 100px;display: block;"></button>' frameborder="1" scrolling="no" width="100%" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe> <h1>非自适应高度</h1> <iframe srcdoc='<button onclick="this.parentNode.appendChild(this.cloneNode())" style="width: 100px; height: 100px;display: block;"></button>' frameborder="1" scrolling="no" width="100%"></iframe> <script> setInterval(()=>{ document.querySelector('iframe').height = window.frames[0].document.documentElement.scrollHeight; }, 200); </script> </body> </html> |
from:https://www.cnblogs.com/jffun-blog/p/9774121.html
View Details在讲解这些属性之前，假如我们项目的目录的结构如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
### 目录结构如下： demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有的依赖包 | |--- app | | |---index | | | |-- views # 存放所有vue页面文件 | | | | |-- parent.vue # 父组件 | | | | |-- child.vue # 子组件 | | | | |-- index.vue | | | |-- components # 存放vue公用的组件 | | | |-- js # 存放js文件的 | | | |-- store # store仓库 | | | | |--- actions.js | | | | |--- mutations.js | | | | |--- state.js | | | | |--- mutations-types.js | | | | |--- index.js | | | |-- app.js # vue入口配置文件 | | | |-- router.js # 路由配置文件 | |--- views | | |-- index.html # html文件 | |--- webpack.config.js # webpack配置文件 | |--- .gitignore | |--- README.md | |--- package.json | |--- .babelrc # babel转码文件 |
具体理解vuex的项目构建可以看这篇文章（https://www.cnblogs.com/tugenhua0707/p/9763177.html）. 下面讲解的也是在这篇文章项目结构基础之上进行讲解的。当然如果你对 vuex熟悉的话，就不用看了，直接跳过即可。 注意：下面的代码都是在 webpack+vue+route+vuex 中构建的，可以把下面的代码 复制到该项目中运行即可。 一：理解mapState的使用 当我们的组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余，为了解决这个问题，我们可以使用mapState的辅助函数来帮助我们生成计算属性。 mapState函数返回的是一个对象，我们需要使用一个工具函数将多个对象合并为一个，这样就可以使我们将最终对象传给computed属性。 上面的表述可能会有些模糊，下面我们来做个简单的demo来演示一下： 项目架构如上面示意图所示，先看看 app/index/store/state.js 代码如下：
|
1 2 3 4 5 |
export default { add: 0, errors: '', counts: 0 }; |
app/index/store/mutations.js 代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import * as types from './mutations-types'; export default { [types.ADD] (state, payload) { state.add = payload; }, [types.SETERROR] (state, payload) { state.errors = payload; }, [types.COUNTASYNC] (state, payload) { state.counts = payload; } } |
app/index/store/mutations-types.js 代码如下：
|
1 2 3 4 5 6 7 8 |
// 新增list export const ADD = 'ADD'; // 设置错误提示 export const SETERROR = 'SETERROR'; // 异步操作count export const COUNTASYNC = 'COUNTASYNC'; |
app/index/store/index.js 代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import Vue from 'vue'; import Vuex from 'vuex'; import state from './state'; import mutations from './mutations'; import actions from './actions'; Vue.use(Vuex); Vue.config.devtools = true; export default new Vuex.Store({ state, mutations, actions }); |
app/index/store/actions.js 代码请看github 如上代码所示，现在我们在 app/index/views/parent.vue 这个路由下，在mounted生命周期打印一下 console.log(this);这句代码的时候，如下代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<template> <div></div> </template> <script type="text/javascript"> export default { data() { return { } }, methods: { }, mounted() { console.log(this); } } </script> |
在浏览器运行后，如下图所示： 如果我们想获取add，或 count的时候，我们需要使用 this.store.state.add或this.store.state.add或this.store.state.count 这样的。 现在我们使用 mapState的话，代码就变成如下了：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<template> <div> </div> </template> <script type="text/javascript"> import { mapState } from 'vuex'; export default { data() { return { } }, methods: { }, computed: { ...mapState({ add: state => state.add, counts: state => state.counts }) }, mounted() { console.log(this.add); // 打印出 0 console.log(this.counts); // 打印 0 } } </script> |
如上代码，我们使用 mapState工具函数会将store中的state映射到局部计算属性中。 我们在mounted方法内，直接使用 this.xx 即可使用到对应computed中对应的属性了。也就是 我们使用 this.add 就直接映射到 this.$store.state.add 了 。 当然mapState也可以接受一个数组，如下简单代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
computed: { /* ...mapState({ add: state => state.add, counts: state => state.counts }) */ ...mapState([ 'add', 'counts' ]) }, mounted() { console.log(this); } |
然后我们再在控制台查看输出的this的值，如下： 可以看到，接受数组也是可以的，在mounted生命周期内，我们直接可以使用 this.add 或 this.counts 可以获取到值了。 切记：mapState的属性的时候，一定要和state的属性值相对应，也就是说 state中定义的属性值叫add，那么mapState就叫add，如果我们改成add2的话，就获取不到add的值了，并且add2的值也是 undefined，如下所示： 二：理解mapActions的使用 mapActions 的思想 和 mapState 一样的，下面我们直接看代码的使用方法哦，如下代码： 如果我们不使用 mapActions 的话，我们调用某个方法需要如下代码所示：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<template> <div></div> </template> <script type="text/javascript"> export default { data() { return { } }, created() { this.test(); }, methods: { test() { // 调用action 需要时使用 this.$store.dispatch 这样的 Promise.all([this.$store.dispatch('commonActionGet', ['getPower', {}])]).then((res) =>{ }); } }, computed: { }, mounted() { } } </script> |
下面我们使用 mapActions的话，代码如下所示：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<template> <div> </div> </template> <script type="text/javascript"> import { mapActions } from 'vuex'; export default { data() { return { } }, created() { this.test(); }, methods: { test() { // 调用 Promise.all([this.commonActionGet(['getPower', {}])]).then((res) => { }); }, // mapActions 使用方法一 将 this.commonActionGet() 映射为 this.$store.dispatch('commonActionGet') ...mapActions(['commonActionGet', 'commonActionGetJSON', 'commonActionPost', 'commonActionPostJSON']) /* // 第二种方式 ...mapActions({ 'commonActionGet': 'commonActionGet', 'commonActionGetJSON': 'commonActionGetJSON', 'commonActionPost': 'commonActionPost', 'commonActionPostJSON': 'commonActionPostJSON' }) */ } } </script> |
三：理解 mapMutations 的使用。 首先我们不使用 mapMutations的话，调用mutations里面的方法，是如下代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<template> <div> </div> </template> <script type="text/javascript"> export default { data() { return { } }, created() { this.test(); }, methods: { test() { // 调用Mutations 需要时使用 this.$store.commit('ADD', 1) 这样的 Promise.all([this.$store.commit('ADD', 1)]).then(() =>{ console.log(this); }); } } } </script> |
打印 如上 this代码后，看到如下图所示： 想获取值，使用 this.$store.state.add 就等于1了。 下面我们使用 mapMutations话，代码需要改成如下代码： […]
View DetailsmapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { mapGetters } from 'vuex' export default { // ... computed: { // 使用对象展开运算符将 getter 混入 computed 对象中 ...mapGetters([ 'doneTodosCount', 'anotherGetter', // ... ]) } } |
如果你想将一个 getter 属性另取一个名字，使用对象形式：
|
1 2 3 4 |
mapGetters({ // 映射 `this.doneCount` 为 `store.getters.doneTodosCount` doneCount: 'doneTodosCount' }) |
扩展：ES6展开运算符 定义： .展开运算符允许一个表达式在某处展开。 使用场景 1.展开函数在多个参数的地方使用 。意指用于函数传参 2.多个元素的地方使用，意指用于数组字面量 3.多个边框的地方使用，意指用于解构赋值 注意事项 展开运算符不能用在对象当中，因为目前展开运算符只能在可遍历对象（iterables）可用。 iterables的实现是依靠[Symbol.iterator]函数，而目前只有Array,Set,String内置[Symbol.iterator]方法，而Object尚未内置该方法，因此无法使用展开运算符。不过ES7草案当中已经加入了对象展开运算符特性。 函数调用中使用展开运算符 之前实现方式
|
1 2 3 4 5 |
function test(a, b, c) { return a + b +c; } var args = [0, 1, 2]; test.apply(null, args);//3 |
如上，我们把args数组当作实参传递给了a,b,c，这边正是利用了Function.prototype.apply的特性。 ES6实现方式
|
1 2 3 4 5 |
function test(a, b, c) { return a + b + c; } var args = [0, 1, 2]; test(...args);//3 |
使用…展开运算符就可以把args直接传递给test()函数。 数组字面量中使用展开运算符 例如：两个数组合并为一个数组
|
1 2 |
var arr1=['a','b','c']; var arr2=[...arr1,'d','e']; //['a','b','c','d','e'] |
用在push函数中，可以不用apply()函数合并2个数组
|
1 2 3 |
var arr1=['a','b','c']; var arr2=['d','e']; arr1.push(...arr2); //['a','b','c','d','e'] |
用于解构赋值 解构赋值也是ES6中的一个特性，而这个展开运算符可以用于部分情景： 展开运算符在解构赋值中的作用跟之前的作用看上去是相反的，将多个数组项组合成了一个新数组。
|
1 2 3 4 |
let [arg1,arg2,...arg3] = [1, 2, 3, 4]; arg1 //1 arg2 //2 arg3 //['3','4'] |
ps： let [arg1,…arg2,arg3] = [1, 2, 3, 4]; //报错 即：解构赋值中展开运算符只能用在最后： 类数组对象变成数组 展开运算符可以将一个类数组对象变成一个真正的数组对象：
|
1 |
var obj = document.getElementById("box").getElementsByTagName("li"); |
|
1 |
<strong>Array.isArray(obj</strong><strong>);//false</strong> |
|
1 2 3 |
var arr=[...obj]; <strong>Array.isArray(</strong>arr<strong>); //true</strong> |
相关资料：https://vuex.vuejs.org/zh-cn/getters.html https://www.cnblogs.com/mingjiezhang/p/5903026.html http://es6.ruanyifeng.com/#docs/destructuring 作者：smile.轉角 QQ：493177502 from:https://www.cnblogs.com/websmile/p/8328138.html
View Detailscreated:html加载完成之前，执行。执行顺序：父组件-子组件 mounted:html加载完成后执行。执行顺序：子组件-父组件 methods：事件方法执行 watch：watch是去监听一个值的变化，然后执行相对应的函数。 computed：computed是计算属性，也就是依赖其它的属性计算所得出最后的值
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
export default { name: "draw", data(){ // 定义变量source return { source:new ol.source.Vector({wrapX: false}), } }, props:{ //接收父组件传递过来的参数 map:{ //type:String }, }, mounted(){ //页面初始化方法 if (map==map){ } var vector = new ol.layer.Vector({ source: this.source }); this.map.addLayer(vector); }, watch: { //监听值变化：map值 map:function () { console.log('3333'+this.map); //return this.map console.log('444444'+this.map); var vector = new ol.layer.Vector({ source: this.source }); this.map.addLayer(vector); } }, methods:{ //监听方法 click事件等，执行drawFeatures方法 drawFeatures:function(drawType){} } |
from:https://blog.csdn.net/liudoris/article/details/80255311
View Detailstranslate3d方法用来规定指定元素在三维空间中的位移。 用法比较简单，本文将通过一段代码实例动态演示translate3d的效果。 与二维空间位移相比多Z轴的位移，具体参阅CSS3 translate(x,y)一章节。 transform变换更多内容参阅CSS3 2D/3D转换一章节。 语法结构：
|
1 |
transform:translate3d(x,y,z) |
参数解析： （1）.x：表示在x轴方向的位移。 （2）.y：表示在y轴方向的位移。 （3）.z：表示在z轴方向的位移。 代码实例如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style> #box{ position:relative; height:150px; width:150px; margin-left:450px; margin-top:250px; padding:10px; border:1px solid black; perspective:1200px; } #ant{ width:100px; height:100px; text-align:center; line-height:100px; font-size:12px; border:1px solid black; background-color:yellow; transform:translate3d(0px,0px,0px); } table{ font-size:12px; width:500px; margin-left:220px; text-align:left; } .left{ text-align:right; width:150px; } </style> <script type="text/javascript"> function change(x,y,z){ var odiv = document.getElementById("ant"); var oshow = document.getElementById("show"); odiv.style.transform = "translate3d(" + x + "px," + y + "px," + z + "px)"; oshow.innerHTML = x_range.value + "/" + y_range.value + "/" + z_range.value; } window.onload=function(){ var x_range = document.getElementById("x_range"); var y_range = document.getElementById("y_range"); var z_range = document.getElementById("z_range"); x_range.onmousemove = function () { change(x_range.value, y_range.value, z_range.value); } y_range.onmousemove = function () { change(x_range.value, y_range.value, z_range.value); } z_range.onmousemove = function () { change(x_range.value, y_range.value, z_range.value); } } </script> </head> <body> <div id="box"> <div id="ant">蚂蚁部落</div> </div> <table> <tr> <td class="left">x轴位移:</td> <td><input type="range" min="-200" step="1" max="200" id="x_range" value="0"/></td> </tr> <tr> <td class="left">y轴位移:</td> <td><input type="range" min="-200" step="1" max="200" id="y_range" value="0" /></td> </tr> <tr> <td class="left">z轴位移:</td> <td><input type="range" min="-200" step="1" max="200" id="z_range" value="0" /></td> </tr> <tr> <td class="left">x/y/z:</td> <td>(<span id="show">0/0/0</span>)</td> </tr> </table> </body> </html> |
上面的代码结合JavaScript演示了translate3d方法的功能。 特别说明：如果不使用perspective属性，将看不到z轴演示效果，因为3D场景就不会有景深的Z轴。 perspective属性参阅CSS3 perspective一章节。 translate3d方法也可以拆分单独写:
|
1 2 3 |
transform:translateX(10px); transform:translateY(20px); transform:translateZ(30px); |
from:http://www.softwhy.com/article-8720-1.html
View Detailsvue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
|
1 2 3 4 |
const router = new VueRouter({ mode: 'history', routes: [...] }) |
当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！ 不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。 所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。 #后端配置例子 #Apache
|
1 2 3 4 5 6 7 8 |
<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule> |
除了 mod_rewrite，你也可以使用 FallbackResource。 #nginx
|
1 2 3 |
location / { try_files $uri $uri/ /index.html; } |
#原生 Node.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
const http = require('http') const fs = require('fs') const httpPort = 80 http.createServer((req, res) => { fs.readFile('index.htm', 'utf-8', (err, content) => { if (err) { console.log('We cannot open "index.htm" file.') } res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' }) res.end(content) }) }).listen(httpPort, () => { console.log('Server listening on: http://localhost:%s', httpPort) }) |
#基于 Node.js 的 Express 对于 Node.js/Express，请考虑使用 connect-history-api-fallback 中间件。 #Internet Information Services (IIS) 安装 IIS UrlRewrite 在你的网站根目录中创建一个 web.config 文件，内容如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <rewrite> <rules> <rule name="Handle History Mode and custom 404/500" stopProcessing="true"> <match url="(.*)" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> </conditions> <action type="Rewrite" url="/" /> </rule> </rules> </rewrite> </system.webServer> </configuration> |
#Caddy
|
1 2 3 4 |
rewrite { regexp .* to {path} / } |
#Firebase 主机 在你的 firebase.json 中加入：
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "hosting": { "public": "dist", "rewrites": [ { "source": "**", "destination": "/index.html" } ] } } |
#警告 给个警告，因为这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。
|
1 2 3 4 5 6 |
const router = new VueRouter({ mode: 'history', routes: [ { path: '*', component: NotFoundComponent } ] }) |
或者，如果你使用 Node.js 服务器，你可以用服务端路由匹配到来的 URL，并在没有匹配到路由的时候返回 404，以实现回退。更多详情请查阅 Vue 服务端渲染文档。 from:https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
View Details