webpack 上线 图片路径不对_webpack4如何解决上线之后图片路径出错 - CSDN
精华内容
参与话题
  • 最近在用vue-cli+webpack做项目,项目架构搭好了之后,想build之后看看效果,但是build出来的index.html文件中的默认资源引用都是绝对路径,也就是相对于根目录的绝对路径;但是我项目如果部署到线上也不一定是在根...

    欢迎访问我的个人博客:http://www.xiaolongwu.cn

    前言

    最近在用vue-cli+webpack做项目,项目架构搭好了之后,想build之后看看效果,但是build出来的index.html文件中的默认资源引用都是绝对路径,也就是相对于根目录的绝对路径;但是我项目如果部署到线上也不一定是在根目录里呀,所以这种默认相对于根目录的绝对路径肯定是不实用的;

    解决方案

    1. 我们的根目录下有个config文件夹,下面有个index.js,如下图,我们把build对象下的assetsPublicPath的值改为 ‘./’,代表当前路径,(之前的’/’,表示根目录)

    image

    这样我们就解决了index.html中资源引用的问题,由原来的绝对路径改为了相对路径
    2. 但是我们项目中css文件里的图片路径之前是不是这么写的

    background: url("../../static/img/img.png")

    打包后就变成了

    background: url("./static/img/img.png")

    这样肯定是不对的,所以css的资源引入路径也需要修改,我们打包后在dist文件下会有一个static文件夹,下面有一个img文件夹,里面放的是图片资源,同样在static文件夹下会有一个css文件,里面是我们的css文件,如下图

    image

    我们再来看一下,似乎我们之前css文件里的引用路径是没有问题的,所以我们就需要修改css打包的配置路径,我们打开build文件夹下的utils.js,在如下位置加上一段代码即可

    image

    我的个人博客地址:http://www.xiaolongwu.cn

    github资源地址:https://github.com/打包时如何将资源和图片引用绝对路径改为相对路径.md

    我的CSDN博客地址:https://blog.csdn.net/wxl1555

    如果您对我的博客内容有疑惑或质疑的地方,请在下方评论区留言,或邮件给我,共同学习进步。

    邮箱:wuxiaolong802@163.com

    展开全文
  • 创建基于webpack打包的vue项目

    万次阅读 2020-05-26 10:02:19
    结合win7、element-ui、vue(vue-router、vue-cli)、webpack等技术,完成了项目的基础工作。难则不会,会则不难;贵在经验总结,后期可参。 花絮 · 先预览 - 项目目录结构图 一、 项目初建、编译打包、服务器配置...

    结合win7、element-ui、vue(vue-router、vue-cli)、webpack等技术,完成了项目的基础工作。难则不会,会则不难;贵在经验总结,后期可参。
    项目截图预览:
    在这里插入图片描述


    花絮 · 先预览 - 项目目录结构图

    在这里插入图片描述


    特别注意 · 比如:

    • 我想创建一个项目,项目文件夹名称为:mywebpack
      • 并且想把项目文件夹的路径设定在 C:/user/mywebpack

    • 全程使用cmd命令创建vue项目,它会从无开始创建。
      • 那么,此时你的C:/user/路径下,就不应该存在文件夹/mywebpack
    • (下面我们开始创建一个项目,步骤如下:)

    一、 项目初建、编译打包、服务器配置 大致分析:【以上图为例】

    1. 指定workplace,开始初建项目:
      cd 目标位置路径(如:C:\Users)
    • 或者:你直接在目标地点Shift + 右键,运行 “在此处打开命令窗口”
    1. 安装vue:
      cnpm install -g vue-cli

    2. 创建一个基于 “webpack” 模板的新项目:
      vue init webpack mywebpack 【mywebpack:项目文件夹名称】

    3. 安装依赖,以及其他脚手架element-ui:
      cd my-first-project
      npm i element-ui -S
      npm install

    4. 运行项目:
      npm run dev

    5. vue开发环境搭建完毕,监听8080端口,浏览器查看:
      localhost:8080

    6. 编译打包:
      cd 项目文件物理路径,如:cd C:\Users\mywebpack
      npm run build

    7. 编译打包完成之后,进行简单文件url或src路径调整;
      如下文【二、】注意(3) 中,所提示

    8. 服务器配置 / 部署
      如下文【五、】参看文章(2) 中,所提示


    二、 cmd 命令 :webpack编译打包

    npm run build 仔细拼写错误!

    在这里插入图片描述

    【打包编译】完成之后,生成dist文件,【截图如下】
    在这里插入图片描述

    注意:
    • (1) npm run build项目打包命令,运行这个命令后会生成可以进行上线的打包文件;
    • (2) 这时候打开根目录下的index.html就可以直接看到你的项目效果了
    • (3) 测试过程中,双击index.html页面出现空白、图片不显示等现象,仔细更改一下src引入路径即可。

    留意:
    • webpack 编译图片是有规则的,你可以自己配置小于多少M的图片进行编译,目前我的情况是只将一些小的图片编译了,vue也是从页面优化的角度出发,大图片编译成 base64 的话,得不偿失,会造成加载页面文件太大,小的图片编译是为了减少 http 请求,从而提升加载效率。
    • 当然图片较大,编码会消耗性能。因此url-loader 提供了一个limit 参数,小于limit字节的文件会被转为dataUrl,大于limit的会使用file-loader进行Corp。

    三、 相关截图,如下:

    在这里插入图片描述

    在这里插入图片描述


    四、 vue里 npm run build之后,应该怎么运行

    项目开发完成之后,可以使用npm run build进行打包工作。打包完成之后,会生成dist文件夹,项目上线时候,只需要将dist文件夹放到服务器就行了。
    [可参考链接:*附3]


    五、 附 · 参考文章:


    以上就是关于“ 创建基于webpack打包的vue项目 ” 的全部内容。

    展开全文
  • 首先需要修改一下配置文件再打包,很多人都是遇到过打包后运行一片空白等等问题,这些问题主要就是路径的问题,所以需要修改config下面的index.js这个配置文件里选项: 上图中第一个要修改的就是静态文件的路径,...

    首先需要修改一下配置文件再打包,很多人都是遇到过打包后运行一片空白等等问题,这些问题主要就是路径的问题,所以需要修改config下面的index.js这个配置文件里选项:

    上图中第一个要修改的就是静态文件的路径,打包后静态文件就在当前目录下,所以修改为./

    第二个是环境设置为生产环境

    修改好后打开cmd运行下面的命令打包即可:

    注意下面的tip,告诉你这个打包后的文件需要放到服务器才能打开,不能直接使用浏览器打开,打包后的文件结构如下:

     

     

    常见问题:css中引用的图片资源找不到

    我的login.vue文件中有一段css,其中引用了一个背景图片,是这样写的

    1

    .login{height:100%;backgroundurl("../assets/login_bg.jpg"no-repeat; background-size: cover;colorwhite;}

    “src/assets/”文件夹下有这张图片,打包后路径发生变化这个图片就找不到了,stackflow上有一个解决办法,很简单

    打开“build/utils.js”,增加一行代码即可

    打包好后可以自己测试运行是否正常

    这个时候需要利用node中的express,方法如下:

    安装express: npm install -g express;

    最新express4.0版本中将命令工具分家出来了,还需要安装一个命令工具: npm install -g express-generator;

    创建一个express工程: express helloworld;

    进入项目主目录: cd helloworld;

    安装必备包: npm install;

    启动程序: npm start;

    把打包后的dist文件夹放在public文件夹里,访问http://localhost:3000/dist就能看到项目了,这样测试好了后,就可以丢后台了

     

    展开全文
  • webpack使用url-loader处理文件、图片

    千次阅读 2018-04-26 16:31:03
    下载 网上都说只需要url-loader就行了,但是我在实际开发过程中碰到了字体文件提示需要file-loader,所以为了避免出问题,这里也下载一下...配置 webpack.config.js { test: /\.(png|svg|jpg|gif|woff|woff2|s...

    下载

    网上都说只需要url-loader就行了,但是我在实际开发过程中碰到了字体文件提示需要file-loader,所以为了避免出问题,这里也下载一下file-loader

    npm install url-loader file-loader --save

    配置 webpack.config.js

    {
        test: /\.(png|svg|jpg|gif|woff|woff2|svg|eot|ttf)$/,
        loader: 'url-loader?limit=1024&name=[path][name].[ext]&outputPath=img/&publicPath=output/'
        'url-loader?limit=8192&&name=img/[name].[ext]'
    } 

    详解

    其实最重要的就是他的这几个参数:limitnameoutputPathpublicPath

    limit:文件大小小于limit参数,url-loader将会把文件转为DataURL;文件大小大于limit,url-loader会调用file-loader进行处理,参数也会直接传给file-loader。
    name:输出的文件名规则,如果不添加这个参数,输出的就是默认值:文件哈希;加上[path]表示输出文件的相对路径与当前文件相对路径相同,加上[name].[ext]则表示输出文件的名字和扩展名与当前相同。加上[path]这个参数后,打包后文件中引用文件的路径也会加上这个相对路径。
    outputPath:表示输出文件路径前缀。图片经过url-loader打包都会打包到指定的输出文件夹下。但是我们可以指定图片在输出文件夹下的路径。比如outputPath=img/,图片被打包时,就会在输出文件夹下新建(如果没有)一个名为img的文件夹,把图片放到里面。
    publicPath:表示打包文件中引用文件的路径前缀,如果你的图片存放在CDN上,那么你上线时可以加上这个参数,值为CDN地址,这样就可以让项目上线后的资源引用路径指向CDN了

    展开全文
  • webpack踩坑之路——图片路径与打包 转自:http://www.cnblogs.com/ghost-xyx/p/5812902.html 刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进...
  • vue-cli+webpack打包路径报错问题

    千次阅读 2018-12-05 16:39:32
    vue项目打包上线,配置相对路径,图片路径错误,文件路径错误问题
  • Webpack(一)前端项目打包配置

    万次阅读 2017-10-09 18:22:20
    前提 全局环境下安装 nodejs 使用1、安装依赖包 如果项目没有npm管理,即没有...安装webpack依赖cnpm install webpack --save -dev –save:表示在安装的同时,将依赖包写入package.json中 -dev:表示将依赖写在d
  • 简单介绍了webpack对引入图片的处理;loader的参数;url-loader和file-loader
  • 调试 webpack4.x 开启调试 ...devtool: 'source-map', //开启调试功能,上线之前需将此行注释 babel:编译JS -babel用来编译js - 让你很轻松的使用ES6 7 等,帮助转化 在src下新建一个src/js/
  • vue cli搭建的项目,在本地测试调试都OK,运行npm run dev之后运行正常,run build后放到线上找不到静态资源文件路径,最后终于解决
  • vue-cli(vue脚手架)项目搭建

    万次阅读 2018-07-04 14:57:09
    vue构建 使用vue-cli作为Vue应用程序和组件的零配置开发工具,查看Vue CLI 的文档。 vue-cli github仓库; 用 vue-cli 快速构建一个工程的时候,除了学习官方文档外,需要熟练掌握es6,还有vue的全家桶(vue-clivue...
  • webpack中使用json配置 json-loader 到了webpack3.x以上版本之后就不用装了,json可以默认识别 在根目录下创建webpack.config.json文件,这里仅仅举例子,可以配置的很多 { "entry":"./src/index.js", "port...
  • webpack打包vue后.vue文件中内容无法挂载到html文件中,使用$mount()方法后页面只显示一段被注释掉的函数。附上代码截图,求解!!!![图片说明](https://img-ask.csdn.net/upload/201806/28/1530170889_494317.png)...
  • webpack4 从零开始

    千次阅读 2018-08-04 18:34:10
    1、项目搭建  新建文件夹webpack4Demo    2、初始化package.json  进入文件夹 执行 npm init 初始化一个工程,里面会有一个初始化的package.json ... 3、安装webpackwebpack-cli  cnpm instal...
  • webpack是最近比较火的构建工具,搭配上同样比较火的ReacJS与ES6(ES2015)一定是现在很多潮流 programmer 的追求。 废话不多,下面就就看下如何从0搭起我们的构建工具。  ...
  • Webpack 4 入门笔记

    千次阅读 2020-10-12 20:27:13
    Webpack4 入门笔记
  • webpack踩坑之路 (2)——图片路径与打包 刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里(bundle)。下面我们就来分析下在...
  • vue-cli详解

    千次阅读 2018-05-11 16:04:58
    1.何为vue-cli 简单来说就是Vue搭建的架子 API:https://github.com/vuejs/vue-cli 2.安装 全局安装vue-cli npm isntall -g vue-cli 3.初始化创建项目 vue init &...template-name为模板的...
  • 优化总结思路 基本打包–>压缩bundle.js和html–>按需加载elementUI和iview–> 把静态资源从bundle.js中抽离–&...把第三方包从bundle.js中抽离–&...安装 clean-webpack-plugin 包...
  • webpack、react、redux、es6 技术栈,所以总结出了一套 boilerplate,以便下次做项目时可以快速开始,并进行持续优化。对应的项目地址:webpack-react-redux-es6-boilerplate 该项目的 webpack 配置做了不少...
1 2 3 4 5 ... 20
收藏数 1,933
精华内容 773
关键字:

webpack 上线 图片路径不对