Vue在build编译时写在style中的路径问题

最新推荐文章于 2023-10-09 16:25:07 发布
原创 最新推荐文章于 2023-10-09 16:25:07 发布 · 871 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#element ui #vue

本文介绍如何修正Vue项目中使用相对路径加载背景图片时出现的路径错误问题。通过调整config/index.js中的assetsPublicPath设置，并在utils.js中为ExtractTextPlugin添加publicPath属性，可以确保图片正确加载。

写在vue文件里面的style样式，在添加例如背景图片的时候，如果用的是相对路径，那么build出来的css文件的路径将会出错，导致找不到图片。
例如:
这里写图片描述
需要改动两个地方:
一个就是config/index.js文件，将assetsPublicPath的路径改为’./’，一般用的模版和vue-cli都是默认’./’,就不需要修改.
第二个就是在build目录下找到utils.js中的ExtractTextPlugin.extract({}),里面添加下面这个属性就完美解决了publicPath: ‘../../’

如图:
这里写图片描述

css js写在一起 vue_Vue模板、JS、CSS分离实现
weixin_35055546的博客
02-23 1105
我们知道，Vue.js文件默认由 template 、 style 、 script 三种标签将 HTML 、CSS、JS混合到一个文件当中。 相信作者尤大这么设计的作用显而易见，有它一定的优势，即：当单个VUE文件如果样式、逻辑、模板相对简单时以上结构能很大程度上降低逻辑复杂度，页面功能和整体结构也一目了然。但是，当页面功能内容偏多，交互逻辑复杂，模板嵌套多层时将会出现如下图这种况。几百上千行...
vue中npm run build打包编译的一系列操作
周家大小姐
05-03 3万+
从package.json 中可以看出，npm run build，其实是执行了 node build/build.js，我们在build文件夹中找到build.js，build主要的工作是：检测node和npm版本，删除dist包，webpack构建打包，在终端输出构建信息并结束，如果报错，则输出报错信息。 'use strict' require('./check-versions')(...
Vue 自定义编译打包路径
weixin_30583563的博客
09-19 1902
在 vue.config.js 文件下添加outputDir配置项： module.exports = { outputDir:"my_target_direct", // others configs }; 如果 vue.config.js 文件不存在，则可以在项目的跟目录下新建一个，然后再添加如上配置。 转载于:h...
记录-vue编译路径问题
yynikki的博客
01-07 418
请求资源的时候地址栏里总是少/cms/，大佬一眼看穿： 大佬优秀，然鹅我还是不行。。。遗留问题，待解决
vue之组件动态添加style样式的四种写法（齐全）
2201_75705263的博客
10-09 7700
根据情况来更改样式的情况非常普遍，下边就是最全的使用锦集！
vue源码文件路径解析
qq_42005992的博客
11-23 634
Vue |— build 打包相关的配置文件，其中最重要的是config.js。主要是根据不同的入口，打包为不同的文件。 |— dist 打包之后文件所在位置 |— examples 部分示例 |— flow 因为Vue使用了[Flow](https://flow.org/)来进行静态类型检查，这里定义了声明了一些静态类型 |— packages vue还可以分别生成其它的npm包 |— src 主要源码所在位置 |—
vue学习笔记9——图片路径问题
aeoliancrazy的博客
09-05 1203
vue学习笔记，是根据网上的一些帖子，自己在学习过程中实际情况，总结而来。每个人在学习过程中和实际操作中是有明显的个体差异的。本文仅作参考使用。
精选资源
解决Vue编译时写在style中的路径问题
01-19
写在vue文件里面的style样式，在添加例如背景图片的时候，如果用的是相对路径，那么build出来的css文件的路径将会出错，导致找不到图片。 通过查找资料，在https://segmentfault.com/q/1010000008438061有人的回答...
用Vue-cli搭建的项目中引入css报错的原因分析
08-29
5. 在开发Vue-cli项目时，需要注意css文件的路径问题，正确地配置css文件的路径可以避免许多报错的问题。 结语 本文详细介绍了Vue-cli项目中引入css报错的问题原因分析和解决方法。希望这个解决方法能够帮助大家在...
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
11-28
当你运行`npm run build`命令时，Vue CLI会按照项目配置对源代码进行编译和优化，生成一个可用于生产环境的构建版本。打包后的文件会被放置在项目根目录下的`dist`文件夹中。这个`dist`文件夹包含了所有需要部署到...
VueQueryBuilder用于构建具有嵌套条件的复杂查询UI组件
08-09
Vue Query Builder 用于构建具有嵌套条件的复杂查询UI组件
vue中style编译 lang=““不写报错
echo
08-02 542
刚开始学vue，可能是个白痴问题 具体原因我也不知道，也可能是我没下载对应的loader 知道的可以告诉我 这是当时的情况 解决办法就是删掉 lang=" " 再次运行就好了
vue-cli 项目修改@的默认路径
胡聊前端的博客
03-25 2642
vue-cli项目默认为src目录提供了别名@ 可按如下方式修改默认的路径 // vue.config.js const path = require('path') module.exports = { chainWebpack: config => { config.resolve.alias .set('@', path.resolve(__dirname, 'path/to/desination')); } } 或者自定义更多路径 // v
Vue.js 目录结构
Hello World ~
08-01 434
build 最终发布的代码存放位置 config 配置目录，包括端口。初学者可以使用默认的 node_modules npm 加载的项目依赖模块 src 这里是我们要开发的目录，基本上要做的事情都在这目录里。里里面包含了几个目录及文件： 1. assets ：放置一些图片，如logo 等 2. components：目录里面放了一个组件文件，可以不用 3. App.vue：项目入口文件，我们也可以直
vue项目build 之后，css文件加载图片或者字体文件时404的解决。
AsuraSylar的博客
05-13 777
ExtractTextWebpackPlugin 提供了一个options.publicPath的 api，可以为css单独配置 publicPath 。 对于用 vue-cli 生成的项目，dist 目录结构如下： dist ├── index.html └── static ├── css ├── img └── js 经常遇见的问题是...
Vue 文件解析、编译流程
liubangbo的专栏
04-13 6336
文章转自：Vue 文件解析、编译流程 - 博客 - 编程圈 本文将以目前（2020/10/26）最新的 vue-cli 版本 @vue/cli-service4.5.8（后文以 CLI4 代指）以脉络，详细分享 .vue 文件解析和编译的过程。解析指.vue文件被解析为template|script|style三份源码，编译指template源码被编译为渲染函数。 写在前面的一些说明： 本文并不涉及过多编译细节，主要目的是帮助大家熟悉编译流程，为解决问题提供编译方向上的思路。 本文使...
.vue文件的编译
小何程序员的博客
02-10 6919
前言 本文章我们来分析一下在vue2当中是如何编译.vue文件 （本文仅简单的框架的分析具体深入原理可查看参考文献） 探究 我们先尝试引入.vue文件，然后输出看看输出的内容 代码如下： main.js文件 import App from './App.vue' console.log(App) 输出的结果为 App.vue文件 <template> <div id="app1"> <img alt="Vue logo" src="./assets/logo.p
Vue项目：style样式篇
热门推荐
happy81997的博客
12-17 5万+
目录 一、动态使用样式 二、全局公共css样式文件 2.1 main.js中引入 2.2 index.html引入 三、单个vue文件中引入样式 四、样式作用范围控制 4.1 scoped私有作用域 4.2 混合使用 4.3 深度作用选择器 4.4 动态生成的dom的样式 一、动态使用样式 使用场景：根据不同的值使用不同的样式，或者给样式某个属性设置一个变量值 使用方法：...
uniapp中的vue界面写的前端代码不在网页上显示是什么原因
最新发布
06-08
在UniApp中Vue界面代码未在网页上显示的问题，可能由以下原因导致。结合引用内容和开发经验，以下是系统化排查方案： --- ### **一、常见原因及解决方案** #### 1. **编译配置错误** - **现象**：代码未正确编译为...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值