<img src="/UploadFiles/2021-04-02/logo.png">

这样在开发模式和发布模式下都能正常引用到图片，好处是和正常html代码格式一样，方便代码的编写和修改。缺点是图片文件地址是静态的，替换图片后如果不手动更换文件名无法解决缓存问题。
另一种方法就是更科学的模块化方式，用require引用图片，这样发布后图片文件名也会生成唯一识别码，图片修改后就会重新生成不同的文件名，从而能避免缓存问题，另外小图片还可以直接生成base64码，减少文件请求。require引用也有两种形式，直接写在:src属性上（注意这里和静态引用不一样，不是src而是:src了）：


<img :src="/UploadFiles/2021-04-02/logo.png')">

或者把图片引用数据写在data绑定数据里：


<img :src="/UploadFiles/2021-04-02/logoImg">

当然我还是推荐绑定数据的方法，代码看起来更清爽，也便于维护。
另外需要说明的是在vue的<style></style>块内的样式里定义的background-image引用图片不需要require引用，直接通过相对路径引入就可以实现上面相同的效果。
三，后台接口调试方法


这里后台接口调试指的是在开发模式下的调试。
vue的开发模式是通过webpack-dev-server启动一个本地服务，所以在开发模式下调用后台接口就产生了跨域问题。这里要说明一下，如果要调用的后台接口本身就是跨域的接口，也就是说页面和接口文件不在同一个域名下，跨域问题需要在后端设置，这时其实vue项目不需要特殊配置了，因为本地访问和发布后访问都是跨域的，解决后端跨域就都解决了。所以我们这里要配置的，还是针对发布以后页面和接口不存在跨越问题，只是开发模式下本地服务和接口产生的跨越问题，如何解决。
首先还是打开config/index.js，找到module.exports里的dev，里面有一项proxyTable，默认是空的，我们要按照我们的接口路径，修改如下：


  proxyTable: {
    '/sales-task-api':{
      target:"http://xxxxx.com/sales-task-api",
      changeOrigin:true,
      pathRewrite: {"^/sales-task-api" : "/"} 
    }
  }



注意上面3个地方的接口路径名称（示例中的"sales-task-api"）要保持一致。


例如实际要调用的接口地址是：http://xxxxx.com/sales-task-api/get-user-list ,经过这样配置设置后，我们在vue中就可以通过 "/sales-task-api/get-user-list" 这样的地址调用，也不会产生跨域问题。同时因为是采用的根目录访问路径，在生产发布以后也不会产生接口访问路径错误问题。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。



                                
                                

                                    Vue,生产环境发布配置,Vue,生产环境配置 
                                

                                    标签：
                                        
Vue,生产环境发布配置,Vue,生产环境配置
                                     

                                
蝙蝠岛资源网 Design By www.hbtsch.com