vue cli3 build --target lib 生成的包静态资源引用路径错误怎么办

最新推荐文章于 2024-08-01 18:15:03 发布
最新推荐文章于 2024-08-01 18:15:03 发布
阅读量2.3k 收藏
点赞数
分类专栏： 前端 vue 库打包
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hou6386083/article/details/107961658
版权
前端 同时被 3 个专栏收录
2 篇文章 0 订阅
订阅专栏
vue
1 篇文章 0 订阅
订阅专栏
库打包
1 篇文章 0 订阅
订阅专栏

         

 

我用vue cli3 库方式打包出自己的组件后，生成了一堆小文件，这是主文件去引用其他静态资源出现路径错误。引用到了绝对路径，各路大神有遇到过类似的问题嘛。麻烦指导一下小弟，不胜感谢！以下是我报错的信息

打包引用该组件后，路径是直接引用了绝对路径，没有走moudles内部相对路径 我的文件

hou6386083
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
专栏目录
Vue CLI 官方文档（三）模式和环境变量（--mode，.env）、构建目标（--target）、部署
qq_43456781的博客
10-11 1256
Vue CLI 官方文档（三）模式和环境变量（–mode，.env）、构建目标（–target）、部署 文章目录Vue CLI 官方文档（三）模式和环境变量（--mode，.env）、构建目标（--target）、部署1. 模式和环境变量模式环境变量示例：Staging 模式在客户端侧代码中使用环境变量只在本地有效的变量2. 构建目标应用库Vue vs. JS/TS 入口文件Web Components 组件注册多个 Web Components 组件的包异步 Web Components 组件在构建时使用
Vue CLI 建立目标
ivenqin的博客
10-10 752
运行 vue-cli-service build 时，可以通过 --target 选项指定不同的生成目标，这允许我们使用相同的代码基为不同的用例生成不同的构建。 我们主要从下面几个方面进行认识和了解： 应用程序 应用程序是默认生成目标，在此模式下： 带资产和资源提示注入的 index.html 供应商库被分割成一个单独的块以获得更好的缓存 4kb以下的静态资产内联到JavaScript中` public 中的静态资产被复制到输出目录中 Vue与JS/TS条目文件 使用 .vue 文件作为
解决vue-cli 打包后静态资源路径不对的问题
weixin_30725315的博客
12-07 645
项目基于vue-cli搭建的，都会自动配置一些打包的参数。在实际项目中，可能会用到static下的静态图片。 打包出来后，图片加载错误。查看图片路径发现有双层的static/css/static/images。很明显是打包的时候，路径配置的不对。 可以通过添加publicPath:"../../"解决该问题：需要修改build文件夹下的utils.js代码，如图所示： publicP...
vue-cli3.0 组件库demo 发布到 npm上开源 所遇到的问题
爱吃牛肉的政
11-27 366
vue-cli3.0 组件库demo 发布到 npm上开源 所遇到的问题 其实网上的文章已经有很多了，按照步骤来是没问题的，这篇文章主要是记录我在发布过程中所遇到的一些问题以及怎么处理的，希望能帮助到一些朋友。 这是我的demo目录结构，项目创建初始化后 只是增加了一个 package文件夹，其他默认的目录结构几乎没变，另外因为用到了typescript，所以会有几个声明文件，另外就是在vue-cli3.0中这个可选的vue.config.js文件，是必须得加的 贴一下config module.expo
Vue3 & 详解 vue-cli 使用 --target lib 打包的方式
cookcyq__的博客
10-15 6392
目前网上大部分的打包流程都不能满足我的理解和需求，而官方的解释也只说明一半，这次我就干脆将 vite/vue-cli 这两者的打包流程详细梳理下。在 vue-cli 使用打包项目后，默认会提供一个入口（通常是 index.html），然后引入一个 js 入口文件完成页面的渲染。其实 vue-cli 还支持将项目作为一个库的方式来进行打包，这里需要借助命令 ，此命令会将入口文件打包成一个库吗，具体可参考官方解释接下来我会逐步详解如何构建属于自己的库。
vue如何打包成库
somelittlelove的博客
05-11 3470
一，创建一个组件 在xxx目录下，所有的单个组件都以文件夹的形式存储，所有这里创建一个目录xxxx/ 在xxxx/目录下创建src/目录存储组件源码 在/xxxx目录下创建index.js文件对外提供对组件的引用 在xxx/xxxx/index.js下面代码导出整个组件 整合所有组件，对外导出，即一个完整的组件库 // 导入组件，组件必须声明 name impor...
Vue组件打包成库和使用库的方法
lweiyue的专栏
09-02 5016
一、开发组件 开发组件的过程并无特殊之处，跟平时在Vue项目里定义component是一样的。有一点需要注意的是，平时在Vue项目里，组件的name可以不写，但如果要打包成库，组件的name必须写。为了描述方便，我们把将要打包的组件定义为MyCom1、MyCom2。其示例代码如下： <template> <div> </div> </template> <script> export default { name: "MyC..
Vue.js脚手架@vue-cli是如何打包的
Z_ammo的博客
01-11 919
首先，要有一个使用@vue-cli打包的Vue.js项目，参考：https://blog.csdn.net/Z_ammo/article/details/103915494 根据package.json的设置： // 截取package.json "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-...
【vue-cli】vue-cli@2源码学习
最新发布
ChenLingZhi1115的博客
08-01 369
vue/cli: 3.11.0创建项目vue create 项目名称@vue/cli: 2.x.x 创建项目下载完成后初始化npm i创建项目。inquirer
vue-cli3 知识点
ivenqin的博客
08-24 557
介绍 vue-cli 通过 @vue/cli 搭建交互式的项目脚手架 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发 一个运行时依赖（@vue/cli-service） 一个丰富的官方插件集合，集成了前端生态中最好的工具 一套完整图形化的创建和管理 Vue.js 项目的用户界面 CLI CLI（@vue/cli）： 一个全局安装的 npm 包（提供vue命令） vue create：快速创建一个新项目的脚手架 vue serve：构建新想法的原型
vue-cli-service报错
qq_57558631的博客
06-02 2882
1、在项目的根目录下直接运行npm cache clean --force && npm install命令 或者直接运行npm cache clean --force。2、删除node_modules文件夹，然后再执行npm install命令。3、看下是不是你没有在packjson里面设置vue-cli的这个依赖。原因说下，主要这个是因为你手动删了一些东西，导致文件和modules里面对应不了。这个情况比较常见。还有就是缓存的问题导致的。第三个那个一般不存在的。
npm（六）：使用Vue CLI构建 lib 发布npm包全流程
知之为知之，不知为不知
10-06 1万+
使用Vue CLI 通过--target lib 将一个单独的入口构建为一个库，本文重点在于组件编写过程，在打包脚本配置、全局组件、局部组件、组件包样式修改、共享全局样式变量、图片资源、背景图片、字体、iconfont、完整引入、局部引入等细节方面有详细的阐述 npm包构建并发布手把手教程...
vue项目打包报错“vue-cli-service build “（已解决）
热门推荐
weixin_44672169的博客
08-11 2万+
vue项目打包报错，错误如下 解决方法：删除项目根目录下的package-lock.json文件，执行npm i，然后重新打包就可以了
基于vue2.x搭建组件库的流程-（一）-组件库搭建与发布流程
weixin_42349568的博客
09-30 1906
这时候，我们已经正确地把包打出来了，因为第一次我们不知道打出来的包地入口文件是啥，这时才知道，所以需要修改package.json中地main值（上文我是预先修改了）。另外就是这个main，它设置了这个组件库打包之后的入口文件，现在我还不知道是这个值（先写上），等会npm run lib之后就会看到了。接下来需要配置.npmignore，配置文件类似于 .gitignore 文件，如果没有 .npmignore，会使用.gitignore来取代他的功能。利用它筛选掉没用的代码。
基于 vue2 发布 npm包
一直记录
11-15 1162
基于vue2项目,新建组件,发布npm包
使用lib库模式打包vue组件及组件引用
yihanzhi的博客
06-18 9256
1、lib库模式打包vue组件 语法： vue-cli-service build --target lib --name libName [entry] 示例： vue.config.js配置： module.exports = { configureWebpack: { output: { libraryExport: 'default' } } } 打包vue组件： npm run lib 执行打包命令后，可看到项目根目录下生成了含有vue组件文件的lib目
eclipse真机调试显示Target unknown的解决方法
dearbaba_11的博客
09-01 377
eclipse真机调试显示Target unknown的解决方法
Vue-Cli 3 构建项目并发布npm包
StriveNuby的博客
09-10 3734
前提 官网详细文档: https://cli.vuejs.org/zh/guide/installation.html node &amp;gt;= 8.9.* (推荐8.11.4) 预先卸载之前安装全局的vue-cli 亮点 将繁琐webpack配置都写入@vue/cli-service库中 快速原型开发，详细看：https://cli.vuejs.org/zh/guide/protot...
node版本下报错build: `vue-cli-service build`
斗师——Ace
01-04 2万+
用vue cli3.0生成vue项目时，运行项目出现报错build: `vue-cli-service build`，serve: `vue-cli-service serve` 最后查看发生安装的node -v版本时v12.0，node版本不稳定造成的，所以通过nvm切换到node -v v8.11.2版本，再次运行就可以了。 1. 下载安装nvm： 2. 通过nvm下载安装node8...
vue-cli3 自动化生成组件：view与component模板
Vue CLI 3 项目优化中的一个重要实践是通过 Node.js 自动化组件模板生成，特别是 generate View 和 Component 这一功能。此方法旨在简化前端开发者在创建新组件时的繁琐操作，提高开发效率。以下将详细介绍如何实现...
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值