vue css 相对路径导入问题级踩坑记录

2024-11-29 09:16:31

前提

npm install style-loader --save-dev
npm install css-loader --save-dev
npm install file-loader --save-dev
npm install vue-style-loader — save

利用官方的组件解决css 以及其他静态资源的路径问题

先附上成功的配置

1.build/utils.js

关键的地方在：

2.build/webpack.base.conf.js

遇到的坑

1.错误写法

第一行用的是绝对路径，第二行用的是相对路径。

这样写造成的错误：

Module build failed: Error: Failed to find ‘~@/assets/css/login.css’

经过多次尝试，以及搜索了很久。有说法是style内部不支持~@这种方式的路径指向。

2.正确的写法

3.如果想在“style”里面用上~@表示的相对路径

接下来介绍我已经实现的方案：

首先选用Less(http://lesscss.cn/) +postcss (https://www.postcss.com.cn/)。

接下来是具体做法，直接上当前配置。

先安装以下指令：

npm install less less-loader extract-text-webpack-plugin --sava-dev

然后打开工程的/build/ 新建文件 postcss.config.js

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: 'last 5 version'
    }
  },
  'postcss-import': {
   resolve(id) {
     if (id.charAt(0) == '~') {
       return id.substr(1)
     } else {
       return id
     }
   }
  }
}

修改webpack.base.conf.js 的配置，增加：

// 它会应用到普通的 `.css` 文件
      // 以及 `.vue` 文件中的 `<style>` 块
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [{
            loader: 'style-loader'
          }, {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            }
          },
          {
            loader: 'postcss-loader'
          }
        ]
      },
      {
        test: /\.less$/,
        loader: "style-loader!css-loader!less-loader"
      },

修改完之后，重启webpack服务。这里我是用Mac 的终端，在webpack服务窗口使用command + C 就是结束当前运行的服务，再使用npm run dev 重启就可以。

在.vue 文件内的最后使用

<style lang="less" scoped>
  @import "~assets/css/rank.less";
  @import "~assets/css/common.less";
  .contentBox {
    padding: 20px;
  }
</style>

这里要注意加上 ~ , 不然依然无法识别路径。这里暂时还没找到原因，看别人的是可以直接使用。网上教程很多，但是很难找到比较完整的东西，对于自学的娃是伤不起，也没有能一直免费为你解答问题的人。还是自己慢慢摸索，相信大家都能有所成长。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

vue 懒加载组件chunk相对路径混乱问题及解决

目录懒加载组件chunk相对路径混乱问题问题描述具体如下解决方法懒加载组件路径不对懒加载组件chunk相对路径混乱问题问题描述在vue项目中用vue-router做路由,做代码分割和懒加载时,由于webpack配置不当,导致懒加载chunk时相对路径出现混乱导致加载chunk失败具体如下 //router.js import VueRouter from 'vue-router' const A = () => import('./pages/a.vue'); const B
解决vue单页面应用打包后相对路径、绝对路径相关问题

在项目开发过程中,在部署过程中,用到了反向代理,这就要求前端代码中不能使用绝对路径.但是我们知道,一般情况下,通过webpack+vuecli默认打包后的HTML.css.js等文件,使用的都是绝对路径.下面可以举几个例子来看一下: 1.打包后的index.html文件 2.打包后的css文件所以,如果在项目中需要使用相对路径来获取静态的资源文件,需要怎么做呢? 1.修改webpack配置文件中的assetsPublicPath,修改为如下图所示. 修改配置后,进行打包发现,打包后的index
Vue 打包后相对路径的引用问题

目录打包后相对路径的引用解决办法解决JS.CSS等资源解决图片的引用问题 vue cli打包相对路径遇到的坑打包后相对路径的引用 vue打包部署后,访问是需要加上项目名这时候访问是使用绝对路径就会处问题了. 解决办法把引用路径改为相对路径解决JS.CSS等资源打开build文件夹下的webpack.prod.conf.js,找到output,添加“ publicPath: ‘./’,”即可或者打开config文件夹下的index.js,找到build,修改“assetsPub
vue路由相对路径跳转方式

目录 vue路由相对路径跳转 1.append 属性 2.router.resolve方法 vue router动态路由点击跳转路径地址重复追加在练习写vue router动态路由时碰到的问题 vue路由相对路径跳转今天写东西遇到多层路由,路由之间跳转时需要相对路径,因此查了一下官网用到了append属性和router.resolve方法,因此列出具体的使用方法. 1.append 属性设置 append 属性后,则在当前 (相对) 路径前添加基路径. 类型:boolean 默认值:fal
vue实现在data里引入相对路径

目录在data里引入相对路径问题解决如何在data中正常引入图片路径此时有两种解决方法在data里引入相对路径问题在项目的HTML中引入图片的相对路径,这样写是能找到图片显示出来的: <img src="../../../static/img/step-ongoing.png"> 但图片太多感觉太乱了了,想在data中通过变量统一管理.这时发现如果直接在data中这样写图片是找不到的: <img :src="stepOngoing"
vue css 相对路径导入问题级踩坑记录

目录前提先附上成功的配置 1.build/utils.js 2.build/webpack.base.conf.js 遇到的坑 1.错误写法 2.正确的写法 3.如果想在“style”里面用上~@表示的相对路径前提 npm install style-loader --save-dev npm install css-loader --save-dev npm install file-loader --save-dev npm install vue-style-loader - sav
vue中使用微信公众号js-sdk踩坑记录

最近又在vue中捣鼓了下微信公众号api的接入,不得不说这里边水是真的深啊,上次分享了微信授权登录和js-sdk签名的部分,其中很多朋友私信我表示了疑惑,今天我就再次尝试理顺一下这里边的坑吧: 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.卡券.支付等微信特有的能力,为微信用户提供更优质的网页体验. 分享页面到朋友圈上文是从官方文档
vmware导入ova文件踩坑记小结

问题来源众所周知,所有的网络行为都会产生相应的网络流量,那么所有的网络攻击行为也有其对应的流量特点,那么是否能根据流量特点进而分析出其对应的是什么攻击行为呢? 我在虚拟机上使用vulnhub的靶场环境进行模拟攻击,然乎使用wireshark进行抓包分析流量. 问题出现因为vulnhub的环境是ova文件的虚拟机,是需要使用virtualbox打开的,但是我没有用过vbox,想着把他导入vmware中进行测试,很快遇到了第一个问题:当我把ova文件导入vmware时报错了,错误如下: 我尝试放
vue2.x background:url()的踩坑记录

目录 background:url()的踩坑记录 backgroundImage路径问题处理方法 background:url()的踩坑记录开发模式下vue中background: url(‘../../assets/img/xxxxx’)直接写在行间样式不生效,即不能直接在标签中style属性中写, 必须写在非行间样式才会生效. 如果要写在行间样式中,需要对资源进行导入,比如ES规范的import或者CommomJS规范的require backgroundImage路径问题项目中图片都
Echarts在Taro微信小程序开发中的踩坑记录

背景近期笔者在使用Taro进行微信小程序开发,当引入Echarts图表库时,微信检测单包超限2M的一系列优化措施的踩坑记录,期望能指导读者少走一些弯路. 为什么选择Echarts? 微信小程序目录市面上使用最多的两款图表库,如下: echarts-for-weixin--echarts微信小程序版本 wx-charts--基于微信小程序的图表库对比两款图表库优缺点刚好相反. echarts-for-weixin:功能强大,但体积非常大 wx-charts:功能相对简单,但体积小由于笔者对e
关于Vue3过渡动画的踩坑记录

目录背景问题定位进一步分析总结背景在我的 <Vue 3 开发企业级音乐 App>课程问答区,有个同学提了个问题,在歌手列表到歌手详情页面到转场动画中,只有进入动画,却没有离场动画: 该学生确实在这个问题上研究了有一段时间,而且从他的描述,我一时半会儿也想不出哪有问题,于是让他把代码传到 GitHub 上,毕竟直接从代码层面定位问题是最靠谱的. 问题定位一般遇到此类问题的时候,我的第一反应是他用的 Vue 3 版本可能有问题,毕竟 Vue 3 还在不断迭代过程,某个版本有一些小 b
详解vue-class迁移vite的一次踩坑记录

目录 what happen 探究解决总结 what happen 最进项目从 vue-cli 迁移到了 vite,因为是 vue2 的项目,使用了 vue-class-component类组件做 ts 支持.当然迁移过程并没有那么一帆风顺,浏览器控制台报了一堆错,大致意思是某某方法为 undefined,无法调用.打印了下当前 this,为 undefined 的方法都来自于 vuex-class 装饰器下的方法.这就是一件很神奇的事,为什么只有 vuex-class 装饰器下的方法才会为
详解element-ui 组件el-autocomplete使用踩坑记录

项目遇到一个比较麻烦的需求,保存用户填写的历史记录,项目使用的element-ui,自然就使用了el-autocomplete组件,然后就是各种踩坑,以下记录以下写代码过程中遇到的问题 createFilter(queryString, filed) { console.log("createFilter==" + queryString) return (item) => { switch (filed) { case 'cardNum': break case 'cardPa
SpringMVC配置404踩坑记录

目录前言错误原因总结和教训前言在学习SpringMVC的路上真是开门就遇见拦路虎了,在配置的时候一直是按照硅谷的视频配置的.但是跑起来就一直是404,这个就很搞人心态了.在配置环境时是在晚上11:00然后配置到11:30,而找错误就十分的痛苦了,从当天晚上的12.00一直到半夜1.30还没找出来,第二天又是卡了一天,直到快到第三天的前一个小时可算让我找出来了. 首先在这里先感谢夜星大佬和杨总.夜星大佬远程帮我找错误,杨总帮我提意见!在此90°的鞠躬.同时也希望本篇博客能够帮助更多的小
详解vue-socket.io使用教程与踩坑记录

目录前言我遇到的问题使用教程安装引入(main.js) 使用(Page.vue) 解决方案结合connect事件+store+路由守卫实现拦截请先允许我狠狠吐个槽:vue-socket.io相关中文博客实在太少太少,来来去去就那么几篇,教程也比较零散,版本也比较老,就算我有暴风式搜索还是找不到解决问题的方案,然后我怒了,开始看源码.写测试demo.几乎把相关的issues都看了一遍,折腾1天后终于...搞定了,下面总结一下~ 考虑到很多小伙伴看完文章还是一头雾水或者无法复现方案,附