Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >打包上传到服务器图片不显示

打包上传到服务器图片不显示

〆千寻、

发布于 2020-03-10 01:05:38

发布于 2020-03-10 01:05:38

2K0

举报

文章被收录于专栏：技术分享文章技术分享文章

改变路径配置

将绝对路径改为相对路径

目标文件：项目目录 > config文件夹 > index.js

assetsPublicPath:'/' 改为：assetsPublicPath:'./' （加一个点变为相对路径）

配置背景图片路径

打包后的css文件夹内app.css文件访问static/img/’图片名’路径错误访问不到图片，在build文

件内utils.js中配置路径。

目标文件：项目目录 > build文件夹 >utils.js

在图中所示位置添加代码

publicPath:'../../',

在命令行中用npm run build 进行打包。

npm run build

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019年10月29日，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

鹅厂写码13年，我总结的程序员高效阅读方法论

进程，线程，协程 - 你了解多少？

微服务与分布式系统设计看这篇就够了！

腾讯文档表格卡顿指标探索之路

从Hadoop1.0到Hadoop2.0架构的优化和发展探索详解

微服务架构：由浅入深带你了解底层注册中心

使用vue开发项目需要注意的问题和可能踩到的坑

最近,在公司给一些刚刚使用vue进行开发的同学做了一次分享, 其中包括一些vue开发中需要注意的点, 以及一些可能会踩到的坑.具体内容如下:

用户1741436

2018/08/01

1K0

快速配置webpack多入口脚手架

当我们基于vue开发单个项目时，我们会init一个vue-cli，但当我们想在其他项目里共用这套模板时，就需要重新init一个，或者clone过来，这非常不方便，而且当多人开发时，我们希望所有的开发代码都在一个git目录下，这时就有了对webpack进行配置的需求，当有些页面需要多入口时，我们又产生了对多入口配置的需求，这里提供一种配置方案，希望能帮助到有需要的人，废话不多说，我们开始吧！

吴裕超

2019/01/02

9320

vue-cli脚手架npm相关文件解读（9）config/index.js

github vue.js javascript

系列文章传送门： 1、build/webpack.base.conf.js 2、build/webpack.prod.conf.js 3、build/webpack.dev.conf.js 4、build/utils.js 5、build/vue-loader.conf.js 6、build/build.js 7、build/dev-server.js 8、build/check-versions.js 9、../config/index.js 下面是config/index.js中相关代码和配置的说明

SmileSmith

2018/04/16

9610

vue --- 解读vue的中webpack.base.config.js

const path = require('path') const utils = require('./utils')// 引入utils工具模块，具体查看我的博客关于utils的解释，utils主要用来处理css-loader和vue-style-loader的 const config = require('../config')// 引入config目录下的index.js配置文件，主要用来定义一些开发和生产环境的属性 const vueLoaderConfig = require('./vue-

小蔚

2019/09/11

1.4K0

vue webpack打包后图片路径错误的解决方法

项目用run dev build 打包后，发现很多图片都不显示，在本地是没有问题的啊！找原因发现通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。

honey缘木鱼

2018/12/24

2.5K0

vue ---webpack 打包上线

tomcat npm css 打包 webpack

　　1、打包后将 dist 文件夹和 index.html 放到 tomcat，在浏览器中访问时，出现空白页，f12 提示 404。　　2、打包好的静态资源均是绝对路径，无法引入进项目，也是 404。

小蔚

2019/09/11

1.3K0

vue项目打包后css背景图路径不对的问题

自己在自学vue做项目的过程中，遇到一个有关背景图片路径的问题，就是css代码中背景图片是根据相对路径来写的，如下图：

用户1174387

2018/08/01

1.6K0

vue项目打包后css背景图路径不对的问题

vue搭建项目及配置

npm webpack css vue.js 打包

　 ② 检查是否安装成功：cmd输入命令 node -v 或者 npm -v, 如果输出版本号，说明我们安装node环境成功。

生南星

2019/08/26

3.2K0

Vue.js学习笔记

表单对象配置学习笔记语法

进入项目目录下的config/index.js文件中的build对象下的assetsPublicPath属性，将assetsPublicPath属性的值由 assetsPublicPath: '/'，改成 assetsPublicPath: './'

用户3880999

2023/04/13

7660

vue项目简书(三)--打包部署

打包 vue.js javascript git html

2.点击index.html，通过浏览器运行，当然会不出意料的报错啦,不要急,下面要进行具体的文件修改,具体步骤如下:

生南星

2019/07/22

3.5K8

vue项目简书(三)--打包部署

Vue项目打包部署到服务器

vue.js javascript 打包

首先在config/index.js中配置相对路径找到assetsPublicPath:’/' 在’/‘前加点assetsPublicPath:’./'

明知山

2020/09/03

3.2K0

Vue教程（三）vue-cli 构建Vue项目后的打包和发布

常量config在vue/config/index.js 文件下配置，__dirname是定义在项目的全局变量，是当前文件所在项目的文件夹的绝对路径。

conanma

2021/11/03

2.8K0

webpack 基础知识整理

webpack 打包 postcss babel.js 编程算法

webpack是一个模块打包工具，支持所有的打包语法，比如 ES Module、CommonJS、CMD、AMD。初期的webpack是用来模块打包js的，发展到现在，已经可以打包很多种文件类型，比如 css、img 。

神葳

2021/01/22

1.4K0

手摸手 Webpack 多入口配置实践

打包 html webpack vue.js javascript

再一次，在网上找的不少文章都不合我的需求，很多文章都是只简单介绍了生产环境下配置，没有介绍开发环境下的配置，有的也没有将多入口结合 vue-router、vuex、ElementUI 等进行配置，因此在下通过不断探坑，然后将思路和配置过程记录下来，留给自己作为笔记，同时也分享给大家，希望可以帮助到有同样需求的同学们～

前端下午茶

2019/09/12

8220

手摸手 Webpack 多入口配置实践

webpack4实用配置指南-上手篇

算起来已经有3到4个项目的webpack构建打包经历。然而每次搭建起来还是有新手既视感，比较捉急。工具用法的东西，好记性不如烂笔头，有必要系统梳理下webpack的配置常用配置以及构建优化。

elson

2018/06/19

4.8K0

vue项目打包步骤

javascript 打包 https java npm

四、那么应该如何修改呢？具体步骤如下： 1、查看package.js文件的scripts命令 2、打开webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl点击，跳转到index.js文件 3、其中dev是开发环境，build是构建版本，找到build下面的assetsPublicPath: ‘/’,然后修改为assetsPublicPath: ‘./’,即“/”前加点。 4、终端运行 npm run build 即可。

全栈程序员站长

2022/06/28

1.3K0

Vue学习笔记

node.js 小程序 vue.js webpack javascript

Npm依赖于Node.js，直接下载安装，并配置环境变量由于个人比较习惯使用 shift+右键唤起powershell来执行命令，默认powershell不允许执行脚本文件，需要解除此安全策略

WindRunnerMax

2022/05/06

1.1K0

前言这段时间，算是空出手来写几篇文章了。由于很久都没有时间整理现在所用的东西了，所以，接下来会慢慢整理出一些文档来记录前段时间的工作和生活。正文首先，我们来说一下安装的东西吧！处于有头有尾的目的，还是几句话草草了事。步骤如下：安装vue-cli 以webpack模版安装目录这样之后，我们就可以使用IDE打开目录了。此处注明我的vue-cli的版本2.9.2，以免之后改版之后，误导读者。之后，附上自己的目录截图，并没有做改动，如图： 'use strict' constpath=requir

企鹅号小编

2018/01/26

1.1K0

(9/24) 图片跳坑大战--css分离与图片路径处理

webpack 打包 javascript css java

在上一节当中，我们把小图片打包成Base64格式（打包到了js当中）。我们也算是对webpack对图片的打包有个基本了解。

wfaceboss

2019/04/08

9070

(9/24) 图片跳坑大战--css分离与图片路径处理

.vue文件结构(vue框架项目)

webpack javascript https java 网络安全

build文件夹里面是对 webpack 开发和打包的相关设置，包括入口文件、输出文件、使用的模块等；

全栈程序员站长

2022/07/28

1.4K0

.vue文件结构(vue框架项目)

相关推荐

使用vue开发项目需要注意的问题和可能踩到的坑

更多 >