vue 脚手架4.0 打包 静态资源路径加载不出来vue.config.js配置

最新推荐文章于 2024-07-22 13:50:45 发布
最新推荐文章于 2024-07-22 13:50:45 发布
阅读量1.5k 收藏
点赞数
分类专栏： vue 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mqq_12/article/details/107537500
版权
本文详细介绍了在Vue CLI 4.0中遇到静态资源路径加载问题时，如何通过vue.config.js文件进行有效配置，确保打包后的应用能够正确引用和加载图片、字体等静态资源。
摘要由CSDN通过智能技术生成 
module.exports = {
   
  publicPath: process.env.NODE_ENV === 'production' ? '' : '/',
  // 公共路径
  indexPath: 'index.html',
  // 相对于打包路径index.html的路径
  outputDir:
最低0.47元/天 解锁文章
至少零下七度
关注
专栏目录
vue本地项目配置图片加载失败_vue开发之图片加载不出来问题解决
weixin_39634052的博客
02-22 2823
在使用vue开发项目的时候，经常会遇到的一个问题就是：图片加载不出来。下面是我总结的几种图片加载不出来的情况及解决办法。一、项目打包完成后，打开整体空白1、路径问题原因在vue+webpack的项目中，项目打包之后的css和js的引用路径是绝对路径，项目部署之后会将静态当成根目录，就造成了文件引用路径的错误。解决办法通过修改配置文件，将绝对路径改为相对路径。具体操作如下：1.vue-cli 3.0...
webpack4脚手架搭建1——打包并编译es6
逗比界一朵花
03-19 727
使用webpack 执行webpack -h 查看webpack命令行使用说明 安装webpack与webpack-cli 安装webpack cnpm install webpack -g，安装后执行webpack -v会提示安装webpack-cli，这是因为在webpack 3中，webpack本身和它的CLI以前都是在同一个包中，但在第4版中，他们已经将两者分开来更好地管理它们。所以用 c...
vue.config.js详细配置
最新发布
L_R_H_的博客
07-22 1455
/ 使用 DefinePlugin 插件定义环境变量。
如何配置vue.config.js 处理static文件夹下的静态文件
10-15
主要介绍了如何配置vue.config.js 处理static文件夹下的静态文件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue（@vue/cli4.5）打包后本地静态资源图片引用失效，不转base64，vue.config.js配置解决处理办法；
薛定谔的猫的博客
07-09 1702
本地新建vue项目，webpack初始配置的静态资源图片转base64大小的限制是3kb，所以当资源小于当前限制则不会转base64；在项目的vue.config.js文件当中对webpack对静态资源的初始相关配置进行修改，将条件尽可能的设置的小点就可以了； 还有一种办法是在服务端进行一个配置，这样的话就不需要前端进行配置了；两者选其一就可以了；...
vue-cli脚手架打包的静态资源请求出错
weixin_33825683的博客
06-05 306
vue-cli脚手架打包的静态资源请求出错 问题 vue-cli默认配置打包后部署到特定路径下静态资源路径错误问题。 静态资源打包使用相对路径后css文件引入大图片路径错误问题 使用vue-cli2脚手架生成的默认打包配置文件，npm run build打包，部署项目到特定路径下：//ip:port/test/index.html 此时访问//ip:port/test/index.html可以...
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
01-21
vue.config.js配置文件： module.exports = { // 基本路径 baseURL已经过时 publicPath: './', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the ...
详解如何配置vue-cli3.0的vue.config.js
10-18
Vue CLI是Vue.js开发的官方脚手架工具，其最新版本Vue CLI 3.0较之以往版本做了很多改进，一个非常关键的变化就是引入了vue.config.js配置文件。这篇文章将深入讲解如何在Vue CLI 3.0中配置vue.config.js，以便为你...
vue-cli脚手架config目录下index.js配置文件的方法
10-18
通过以上配置，开发者可以灵活地调整 Vue CLI 项目以满足特定需求，如更改端口、自定义静态资源路径、设置环境变量、开启 GZIP 压缩等。了解并掌握这些配置选项，有助于提高开发效率和项目性能。在实际开发过程中，...
vue配置代理vue.config.js后不生效（小坑）
m0_67392182的博客
03-09 4823
我的项目使用vue-cli4脚手架搭建的，想要修改webpack配置，需要手动在根目录下面添加一个vue.config.js文件，会自动识别该文件。附上我的配置： // vue.config.js 配置说明 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions // 这里只列一部分，具体配置参考文档 module.exports = { // 部署生产环境和开发环境下的URL。 // 默认情况下，V
Vue学习笔记 —— 关于vue.config.js不生效的解决方案
Marinda_Speed的博客
06-18 1万+
项目package.json 脚本配置项目是否为用 vue-cli-service serve 启动就会用 vue.config.js； 用 webpack-dev-server 启动就会用 wepback.config.js（默认）。关于 Vue学习笔记 —— 关于vue.config.js不生效的解决方案 就讲到这里，对你有帮助的话！谢谢你的观看！...
vue.config.js 全局配置
热门推荐
轻风细雨_林木木
03-20 2万+
1.Webpack配置实例 参考：https://cli.vuejs.org/zh/config/ vue.config.js vue.config.js 是一个可选的配置文件，如果项目中存在这个文件，那么它会被 @vue/cli-service 自动加载，你也可以使用 package.json 中的 vue 字段配置，但是package.json中需要严格遵照 JSON 的格式来写。 文件初始值： /** * @type {import('@vue/cli-service').ProjectOpti
vue 加载图片使用@路径加载不出来
坐等夕阳落time的博客
10-14 3191
vue 加载图片使用@路径加载不出来
Vue 不重新打包，动态加载全局配置的实现过程
本博客纯属个人网络笔记，如对阁下有用，甚喜；否则，关掉即可，不喜勿喷。专心写代码，不做键盘侠！
12-10 2353
Vue.js 如何通过全局静态文件实现配置的动态修改，而且不需要重新打包就能立即生效呢？本文记录这个问题的解决过程。
解决vue打包后部署到服务器找不到静态资源问题
ct5211314的博客
12-28 9349
我们将项目打包后放到服务器上，会报找不到静态资源的错误。 一、错误原因 将项目打包后放在服务器上会默认在根目录上去找静态资源，但我们并没有将资源放在根目录上 二、解决方案新增vue.config.js文件 与后台沟通好服务器资源所放位置 module.exports = { publicPath: process.env.NODE_ENV === "development" ? "" : "/h5/pharmacy", }; ...
vue.config.js不生效/没作用/无法加载
InterestAndFun的博客
07-16 6031
解决方案 检查你的vue-cli版本是否为 vue-cli 3以上的，在vue-cli 2.x版本都是不支持的。 你可以输入vue --version来查看你的 vue-cli 版本。 如果你还是用vue init webpack 项目名 来创建工程，用npm run dev 来运行项目，那就是了，旧版本不支持vue.config.js ...
vuejs脚手架配置和打包
qq_32722591的博客
04-11 645
vue-cli搭建 1、下载脚手架 npm install --global vue-cli vue init webpack gshop gshop 项目名称自行修改 cd gshop npm install npm run dev 2、运行脚手架 npm run dev 或者 npm start 打包好的文件在dist文件夹下 3、项目打包 npm run bu...
Vue打包路径配置
qq_33061377的博客
10-19 1万+
1. 配置文件 module.exports = { // ...... // 相对路径都是相对于index.js所在的目录config开始的 build: { // index,assetsRoot两个路径基本不用改动，只是用于文件打包存放的路径 // index.html的路径 index: path.resolve(__dirname, '../dist...
Node.js与Vue脚手架环境配置全攻略
以上就是Node.js+Vue脚手架环境搭建的详细步骤，包括Node.js的安装、VueCLI的配置和项目创建。在实际操作中，根据自己的系统环境和需求进行相应的调整，确保所有步骤都能顺利执行，以便快速构建Vue.js开发环境。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值