1、在vue下默认都是在根目录下,
我们的请求地址一般是这样的
http://127.0.0.1:8080/
但是我们部署到服务器后,地址可能是这样的
http://127.0.0.1/earth/
2、我们在vue下会引用static中的静态资源,这里简单示例一个image和一个json
我们的代码如下
<template>
<div id="main">
文字内容
<div id="test"></div>
<div id="test2">
</div>
</div>
</template>
<script type="text/javascript">
export default{
name:'Main',//模板名称
data(){
return {
viewer:null,
}
},
components:{
},
mounted(){
var image = new Image();
image.src = "./static/cities.json";
},
methods:{
}
}
#main,#CesiumViewer{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
background-color: #ccc;
}
#test{
background: url(../../static/m.jpg) center;
width: 300px;
height: 300px;
}
#test2{
background: url(/static/1.jpg) center;
width: 300px;
height: 300px;
}
3、这种情况下图片和json都是可以获取到的(json用image来替代)
3、router index.js配置
4、再看关于webpack的配置
需要修改两处,config /index.js
再修改build/utils.js
5、之后可以npm run build,然后将dist下的文件拷入nginx/html/eart路径下
可以看到图片显示
只显示了一张,问题就是关于路径的配置