vue 打包静态资源路径不对

2024-08-31

Vue Cli 打包之后静态资源路径不对的解决方法

cli2版本: 将 config/index.js 里的 assetsPublicPath 的值改为 './' . build: { ... assetsPublicPath: './', ... } cli3版本: 在根目录下新建 vue.config.js 文件,然后加上以下内容:(如果已经有此文件就直接修改) module.exports = { publicPath: '', // 相对于 HTML 页面(目录相同) } 参考链接: 1. vue打包静态资源路径不正确的解决办法 2. V

vue打包静态资源路径不正确的解决办法

vue打包静态资源路径不正确的解决办法 vue项目完成打包上线的时候会碰到静态资源找不到的问题,常见的有两个 1.js,css路径不对解决办法:打开config/index.js,将其中的assetsPublicPath值改为’./’ 2.css中引用的图片资源找不到我的login.vue文件中有一段css,其中引用了一个背景图片,是这样写的 .login{height:100%;background: url("../assets/login_bg.jpg") no-repeat

vue打包静态资源路径不正确的解决办法【转】

vue项目完成打包上线的时候很多人都会碰到静态资源找不到的问题,常见的有两个 1.js,css路径不对解决办法:打开config/index.js,将其中的assetsPublicPath值改为’./’ 2.css中引用的图片资源找不到我的login.vue文件中有一段css,其中引用了一个背景图片,是这样写的 .login{height:100%;background: url("../assets/login_bg.jpg") no-repeat; background-siz

vue+webpack静态资源路径引用

处理静态资产你可能已经注意到,在项目结构中我们有两个静态资产目录:src/assets和static/.他们之间有什么区别? 要回答这个问题,我们首先需要了解Webpack如何处理静态资产.在*.vue组件中,您的所有模板和CSS都会被解析vue-html-loader并css-loader查找资产URL.例如,在<img src="./logo.png">和中background: url(./logo.png),"./logo.png"是一个相对资

vue项目之webpack打包静态资源路径不准确

摘自:https://blog.csdn.net/viewyu12345/article/details/83187815 问题将打包好的项目部署到服务器,发现报错说图片找不到. 静态资源如js访问不到分析并且解决问题明确一点的就是,看到报错404,找不到静态资源,很明显,路径错误了. 静态资源找不到如js文件资源打包路径有误,打包后的资源使用了绝对根目录路径,因此将项目部署到特定目录下,其引入的资源路径无法被正确解析. 解决: 找到config下面的index.js文件,将划线处改为如下

vue打包静态资源后显示空白及static文件路径报错

1.打包之后打开dist的页面显示空白: 这个是打包项目比较常见的一个错误改一下config下面的index.js中bulid模块导出的路径.因为打包后的index.html里边的内容都是通过script标签引入的,默认显示的路径不对,打开肯定是空白的. 2.src里边router/index.js路由配置里边默认模式是mode:'hash'(页面会在路由上加#),有时候改成了history(纯净路由)模式的话,打开也会是一片空白.所以改为hash或者直接把模式配置删除,让它默认的就行 . e

WebPack系列：Webpack编译的代码如何在tomcat中使用时静态资源路径不对的问题如何解决

问题: 使用webpack+vue做前端,使用tomcat提供api,然后npm run build之后需要将编译,生成如下文件: | index.html \---appserver +---css | app.9f4d9411ca2e49d41c43873d1ac872ea.css | app.9f4d9411ca2e49d41c43873d1ac872ea.css.map | +---img

用node.js express设置路径后子路径下的页面访问静态资源路径出问题

在routes/news_mian.js 设置了访问news_main.html 的路径 '/',通知设置一个访问news-page.html的子路径'/newspage'子路径.但是在访问loaclhost:3000/news/newspage时静态资源路径前多了一个/news导致不能找到静态资源 app.js var express=require('express'); var app=express(); var path=require('path'); var http=requir

springboot之静态资源路径配置

静态资源路径是指系统可以直接访问的路径,且路径下的所有文件均可被用户直接读取. 在Springboot中默认的静态资源路径有:classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,从这里可以看出这里的静态资源路径都是在classpath中(也就是在项目路径下指定的这几个文件夹) 试想这样一种情况:一个网站有文件上传文件的功能,如果被上传的文件放在上述的那些文件夹中会有怎

13.1Springboot 之静态资源路径配置

Spring 静态资源路径是指系统可以直接访问的路径,且路径下的所有文件均可被用户直接读取. 在Springboot中默认的静态资源路径有:classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,从这里可以看出这里的静态资源路径都是在classpath中(也就是在项目路径下指定的这几个文件夹) 试想这样一种情况:一个网站有文件上传文件的功能,如果被上传的文件放在上述的那些

Spring boot 默认静态资源路径与手动配置访问路径的方法

这篇文章主要介绍了Spring boot 默认静态资源路径与手动配置访问路径的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下在application.propertis中配置 ##端口号 server.port=8081 ##默认前缀 spring.mvc.view.prefix=/ ## 响应页面默认后缀 spring.mvc.view.suffix=.html # 默认值为 /** spring.mvc.static-path-pattern=/** # 这里设置要指向的路径,

webpack4 打包静态资源

demo 代码点此,开始之前,先做点准备工作. 准备工作准备一个空文件夹,然后执行下列命令: npm init -y npm i -D webpack webpack-cli 然后创建一个 dist 目录,并在里面创建一个 indedx.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi

Springboot 之静态资源路径配置

1.静态资源路径是指系统可以直接访问的路径,且路径下的所有文件均可被用户通过浏览器直接读取. 2.在Springboot中默认的静态资源路径有:classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/ 3.在Springboot中可以直接在配置文件中覆盖默认的静态资源路径的配置信息: #自定义的属性,指定了一个路径,注意要以/结尾web.upload-path=D:/tem

SpringBoot 之静态资源路径、显示首页、错误页

静态资源路径静态资源支持放在以下路径中,访问优先级从上到下: classpath:/META-INF/resources/ classpath:/resources/ classpath:/static/ # 默认路径 classpath:/public/ 其中 classpath 为 src/main/resources 目录. 请求地址为:http://localhost:8080/xx.js 首页文件位置: classpath:/static/favicon.ico classpath

Vue打包后访问静态资源路径问题

Vue介绍中static文件夹里放的是静态资源目录,如图片.字体等. 我们发现运行npm run start后本地图片路径是没问题的,但是打包上传后会怎么样呢? 我们知道,执行npm run build 后会生成dist文件夹,把里面的index.html在浏览器运行会发现图片路径出错啦!!! 解决方法: 1.先找到config下的index.js文件把最后的'/' 改为 './' 2.接着把图片地址改为这样就解决啦~~

webpack打包vue项目，资源路径如何从绝对路径改为相对路径？css中的图片资源如何修改配置？

资源相对引用路径问题描述一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径,那么要解决这种问题,就得引用相对路径. 解决办法打开webpack.prod.conf.js 找到output:增加 publicPath: './', 即可,如图. 那么这样后,资源的引用路径就正确了. 当然在config文件夹下的index.js中修改 assetsPubl

aiohttp之添加静态资源路径

所谓静态资源,是指图片.js.css等文件.官方的说明在这里. 以一个小项目来说明,下面是项目的目录结构: . ├── static │ ├── css │ │ ├── base.css │ │ ├── bootstrap.min.css │ │ └── font-awesome.min.css │ ├── font │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.svg │

Spring boot 默认静态资源路径与手动配置访问路径

在application.propertis中配置 ##端口号server.port=8081 ##默认前缀spring.mvc.view.prefix=/## 响应页面默认后缀spring.mvc.view.suffix=.html # 默认值为 /**spring.mvc.static-path-pattern=/**# 这里设置要指向的路径,多个使用英文逗号隔开,默认值为 classpath:/META-INF/resources/,classpath:/resources/,classp

nginx 配置静态资源路径(url不同于static path)

目的用nginx做静态资源代理可以减少请求对后台服务器的压力,使响应更加迅速. 配置情景一 url : 127.0.0.1:8000/images/abc.jepg path: /static/iamges/abc.jepg 这种情况很容易配置: server { listen 8000; server_name myserver; client_max_body_size 251m; location /i

vue开发完成后打包后图片路径不对

用vue做了一个小的移动端项目,从头到尾做下来,感觉自己好多东西都没弄清楚过.也学到了很多,已整理笔记在自己电脑上,但是比较零散,空了再来仔细整理整理. 于是,上周五模拟好数据(接口还未写),准备打包发布到服务器上面看看效果. 这时,真的问题就来了,很多图片没出来,仔细一看,这特么的路径完全不对呀! 虽然以前也做vue, 但是仔细想想,自己还从来没有用vue-cli打包过后来看,一直是在本地边开发边看的. 所以呢,什么都得自己实践,才能学得更多! 废话不多说,直接上自己的代码例子: 之前我也写过

vue 打包 静态资源路径不对

热门专题

vue 打包静态资源路径不对