vue 编译后在nginx部署·

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



修改publicPath


5、之后可以npm run build,然后将dist下的文件拷入nginx/html/eart路径下

可以看到图片显示



只显示了一张图片

只显示了一张,问题就是关于路径的配置


上面的配置是对的
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,802评论 1 45
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 1,909评论 0 1
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,342评论 0 11
  • 本书介绍 你是不是对Django的学习感到迷茫?是不是对网上零星的教程感到绝望?是不是苦于没有可以迅速上手的实例而...
    阡陌3536阅读 1,339评论 0 0
  • “孔子是灰色的,是最具普适性的色彩,可以和所有色彩搭配。灰色必须与其他颜色搭配,才可显示其普适性,显示其高贵与纯粹...
    Jianapple阅读 822评论 0 0