vue-cli中打包图片路径错误的解决方法
最近第一次使用vue-cli构建项目,第一次打包部署到服务器上的时候出现图片加载不出来,结合网上的方法,终于给摸索出来。将项目部署到服务器上分为两种:一种是直接部署到服务器的根目录,另外一种是部署到服务器的子目录下
1.我们首先来说部署到根目录下 就是比如:www.****.com
找到项目中config文件夹下的index.js文件
将文件中的assetsPublicPath: '/',改成如下方框这样。
这样的目的是将绝对路径改成相对路径
如果放在根目录下,这样就可以了
2.放在子目录下 如:www.***.com/community/dist
分为两步 第一步和上面的一样
如果你还用到路由的话,将router文件夹下的index文件,改成如下图这样
用npm run build命令打包完之后,就将dist文件放到community文件夹下,这样图片就可以显示出来了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
关于Vue背景图打包之后访问路径错误问题的解决
案例环境 通过vue-cli脚手架创建的vue项目 在项目打包的时候遇到了背景图片路径出错的问题,经过谷歌一番,发现是在配置的时候对图片的限制大小过小造成的 首先,出错点在url-loader上面. // url-loader配置 // build/webpck.base.conf.js { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', query: { limit: 10000, name: utils.assetsP
-
Vue.js中的图片引用路径的方式
当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形: 使用一 我们在data里面定义好图片路径 imgUrl:'../assets/logo.png' 然后,在template模板里面 /*错误写法*/ <img src="{{imgUrl}}"> 这样是错误的写法,我们应该用v-bind绑定图片的srcs属性 <img :src="imgUrl"> 或者 <img src="../assets/logo.png
-
详解vue-cil和webpack中本地静态图片的路径问题解决方案
本文介绍了vue-cil和webpack中本地静态图片的路径问题解决方案,分享给大家,具体如下: 1 本地图片动态绑定img的src属性 一般我们在html中或者vue组件文件中引用图片是这样,这是不需要做特别处理的 我们将图片放入assets中或者重新建立个文件夹img什么的都可以,随意- 但是我们这时候可能会有个需求就是我们要动态绑定一组本地图片 1 将图片当成模块先引进来,再绑定 但是这种做法局限性比较大,模块化差,代码不好看 . 如果我做的是纯静态的网站展示,有许多的本地静态资源需要加载
-
vue-cli中打包图片路径错误的解决方法
最近第一次使用vue-cli构建项目,第一次打包部署到服务器上的时候出现图片加载不出来,结合网上的方法,终于给摸索出来.将项目部署到服务器上分为两种:一种是直接部署到服务器的根目录,另外一种是部署到服务器的子目录下 1.我们首先来说部署到根目录下 就是比如:www.****.com 找到项目中config文件夹下的index.js文件 将文件中的assetsPublicPath: '/',改成如下方框这样. 这样的目的是将绝对路径改成相对路径 如果放在根目录下,这样就可以了 2.放在子目录下 如
-
webpack打包后直接访问页面图片路径错误的解决方法
前言 本文说的这种图片路径错误是这样的,运行webpack-dev-server,一切正常,没有错误.当webpack之后,直接打开index页面,报错,图片找不到,找不到的原因是路径错误. 先看我的项目代码 webpack.config.js var Webpack = require("webpack"); var path = require("path"); module.exports = { entry: './js/entry.js', output:
-
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
这里建议刚学vue的同学第一个小案例不要使用vue-cli进行操作,待对基本的api使用的比较顺手了之后再进行vue-cli的体验比较好.本人是一名后端开发人员,接触前端时间不长,这里有说的不好的地方,还请大家评论建议下. 1. 安装必要的环境准备 首先我们要能够暗转node.js,这个环境.百度搜索node,进入官网根据自己的操作系统进行下载即可.现在的版本都是自带npm的了.所以安装后,环境变量正常情况下会自动配置,开启一个命令行终端,输入node,npm,就可以看到相应的信息.那么说明安装
-
详解Vue.js中引入图片路径的几种方式
vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档 静态资源可以通过两种方式进行处理: 在 JavaScript 被导入或在 template/CSS 中通过相对路径(以 . 开头)被引用.这类引用会被 webpack 处理. 诸如 <img src="..."> . background: url(...) 和 CSS @import 的资源 例如, url(./imag
-
django DRF图片路径问题的解决方法
前言 其实就是Django RESTful Framework,RESTful一种API的命名风格,主要因为前后端分离开发出现,前后端分离: 用户访问静态文件的服务器,数据全部由ajax请求给到,RESTful风格:数据应该是名词,而动词由HTTP的请求方式来体现,RESTful风格的API给前端返回 结果对象,无论什么请求方式 本文主要介绍了关于django DRF图片路径问题,下面话不多说了,来一起看看详细的介绍吧 问题描述: 为什么DRF中有时候返回的json中图片是带域名的,有时候是不带
-
Vue项目中使用addRoutes出现问题的解决方法
目录 前言 一.404页面 1. 出现的原因 2. 解决方案 二.刷新白屏 1. 出现原因 2. 解决方案 三.路由重复 1. 出现原因 2. 解决方案 总结 前言 addRoutes官方介绍: 函数签名: router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则.参数必须是一个符合 routes 选项要求的数组. 这两天做vue后台权限管理系统的时候,发现使用vue提供的addRoute添加路由以后,会出现两个bug,一起来看看如何解
-
asp.net程序在调式和发布之间图片路径问题的解决方法
服务器控件显示图片问题不大,会自动显示相对位置, 非服务器控件有两种方法解决: 1. Request.ApplicationPath + 图片路径(images/xxx.gif) : 数据库里 图片路径以文件夹名开头 2. ResolveClientUrl("(~/images/xxx.gif") : 数据库里 图片路径为(~/开头) 注意: ResolveClientUrl 返回相对于当前页面下文件的地址 ResolveUrl 则返回页面所在应用程序下的相对地址
-
vue项目中使用vue-i18n报错的解决方法
前言 Vue-i18n大家应该都不陌生,Vue-i18n安装的安装方法如下: npm install vue-i18n --save 然而最近在vue项目中使用vue-i18n的时候,居然报错了,通过查找相关的资料终于找到了解决的方法,下面话不多说了,来一起看看详细的介绍吧 发现问题 iview-admin框架克隆到本地,添加路由的时候,稍不注意就会遇到以下情况: Value of key 'xxx' is not string! Cannot translate the value of ke
-
php命令行(cli)模式下报require 加载路径错误的解决方法
今天,同事突然告诉我,我写的一个做计划任务的php脚本执行总是不成功. 脚本本身很简单,里面只有包含了几个库文件并执行了一个函数,函数应该没有错误,这个函数在别处也调用过,没有问题.我在本地用浏览器访问页面,执行成功,看来没有问题,我有点怀疑是同事的计划任务的问题.我又打开命令行,用php直接执行脚本,这回报错了,是require 包含文件错误,看来是路径不对. 不明白是什么原因引起的,只是从报错来看是路径不对,我猜测是跟相对路径有关,于是把相对路径的全部改成绝对路径,再执行,问题解决. 在百度
-
自己编程中遇到的Python错误和解决方法汇总整理
开个贴,用于记录平时经常碰到的Python的错误同时对导致错误的原因进行分析,并持续更新,方便以后查询,学习. 知识在于积累嘛!微笑 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 错误: 复制代码 代码如下: >>> def f(x, y): print x, y >>> t = ('a', 'b') >>> f(t) Traceback (most rece
随机推荐
- 详解Spring Boot配置排序依赖技巧
- php保存信息到当前Session的方法
- 讲解Python中的递归函数
- ASP常用函数:XMLEncode
- 基于C++全局变量的声明与定义的详解
- 真正高效的SQLSERVER分页查询(多种方案)
- 实例说明为什么不要行内使用javascript
- 人尽可用的Windows技巧小贴士之下篇
- windows服务器维护经验小结(rsync,serv_u)
- c#反射机制学习和利用反射获取类型信息
- PHP MYSQL简易交互式站点开发
- C++取得当前时间的方法
- 解析:android 如何从JPEG生成BufferedImage
- java文件上传下载代码实例
- vue根据值给予不同class的实例
- Linux用户自定义at、cron计划任务执行的方法
- iOS高仿微信文章悬浮球功能
- ThinkPHP实现的rsa非对称加密类示例
- MySQL中通过EXPLAIN如何分析SQL的执行计划详解
- 浅析Python3 pip换源问题