vue.js dist目录下的index.html 访问不了怎么解决

JavaScript017

vue.js dist目录下的index.html 访问不了怎么解决,第1张

因为webpack的配置文件中有一个叫static path的配置项,

vue-cli中默认是/,

所以放在非根目录下打包的js和css等静态文件的路径就会出错。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

a{display: block}

</style>

</head>

<body>

<div>

<a v-for="(index,item) in items" data-index="{{index}}" v-on:click="onclick" href="http://www.baidu.com">{{ item.text }}</a>

</div>

<input type="text" name="" id="index" value=""/>

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

new Vue({

el: 'body',

data: {

items: [

{ text: '巴士' },

{ text: '快车' },

{ text: '专车' },

{ text: '顺风车' },

{ text: '出租车' },

{ text: '代驾' }

]

},

methods: {

onclick:function(event){

event.preventDefault()

let target = event.target

console.log(target.getAttribute("data-index"))

document.getElementById('index').value = target.getAttribute("data-index")

}

}

})

</script>

</body>

</html>

你的意思是不确定有多少级么??

可以参考一下例子

http://codepen.io/Zemistr/pen/ZYgrvK

http://jsfiddle.net/yyx990803/2caRm/

都是一个意思,就是必须最少要有一个组件 , 然后里面再套这个组件实现递归..就可以无限级了

当然,如果能确定最多有多少级,直接写html就好了