qq_38372263 2018-06-28 07:29 采纳率: 0%
浏览 4716
已结题

关于webpack打包vue后无法渲染页面的一个问题

webpack打包vue后.vue文件中内容无法挂载到html文件中，使用$mount()方法后页面只显示一段被注释掉的函数。附上代码截图，求解！！！图片说明图片说明图片说明图片说明

  • 写回答

4条回答 默认 最新

  • author_r 2018-06-28 07:34
    关注

    在引入图片的时候的地址数据的时候需要使用require来讲图片作为模块引入，这样才会被webpack正确的打包的项目文件中，否则会因为webpack根据依赖打包而找不到指定的图片

    如果是在HTML中的img中通过v-bind引入引入图片,src为对应的数据变量的话也是需要使用require来将图片作为模块引入才会被webpack正常打包

    在HTML中直接书写的img地址以及css中引入的图片地址无需使用其他手段正常引用即可被webpack正常打包

    评论

报告相同问题？

  • 解决在vue项目中webpack打包后字体不生效的问题
    2020-10-18 02:47
    这个问题通常表现为在开发环境中正常显示的字体，在经过Webpack打包后在生产环境中无法正常渲染。 出现这种问题的原因在于Webpack在处理CSS时，可能会对字符串进行转义，尤其是当使用中文字符作为字体名称时。例如...
  • webpack打包Vue项目【完整版】
    2024-09-28 07:00
    子羽bro的博客 第一部分：将先介绍 webpack 打包 Vue 需要用到的 Vue 相关包，然后配置项目目录及必要文件，最后配置 webpack.config.js，运行项目 第二部分：探索 cdn、分包、tree Shaking、已经热更新的使用`
  • electron-vue利用webpack打包实现多页面的入口文件问题
    2020-10-17 00:36
    `electron-vue` 是一个预配置的 `Vue.js` 和 `Electron` 开发环境，它整合了 `vue-cli` 和 `webpack` 配置，使得在 Electron 中使用 Vue.js 更加方便。 **1. Webpack 的核心概念** 在深入讨论多页面配置之前，我们...
  • 从零开始使用 Webpack 搭建 Vue 3 脚手架工程（一）
    2024-11-20 15:15
    devinLiuYi的博客 Webpack 是功能强大的模块打包工具，可以灵活配置，支持 Vue 3 项目的构建需求。本文从初始化项目到配置 Webpack，再到运行开发服务器和优化，完整地演示了 Vue 3 脚手架的搭建过程。接下来可以继续集成 Vue Router...
  • webpack4vue2的多页面框架
    2019-08-12 03:12
    Webpack 4 和 Vue 2 的多页面框架是一个用于构建大型应用的现代前端开发解决方案。它允许开发者将多个独立的 Vue 应用程序整合到一个项目中，每个应用程序都有自己的入口、HTML 页面和 CSS。这样的架构在处理多个...
  • 解决vue+elementui项目打包后样式变化问题
    2020-10-15 00:25
    在使用Vue.js和ElementUI构建项目时，开发者经常会遇到一个问题：在开发环境下一切正常，但一旦执行项目打包，样式就会发生改变，导致页面显示效果与预期不符。这主要是由于CSS加载顺序、模块化打包工具（如Webpack...
  • 前端开发中 Webpack 与 Vue 的集成方法
    2025-06-02 19:46
    AI实战架构笔记的博客 在前端开发中，Vue 负责用“积木思维”构建用户界面，而 Webpack 则是“资源大管家”，负责整理、打包和优化这些资源。本文聚焦如何让 Webpack 高效管理 Vue 项目的资源，覆盖基础概念、配置原理、实战步骤及常见...
  • 使用 Webpack 搭建 Vue 应用开发环境
    2024-12-21 14:37
    Jayden_念旧的博客 Webpack 学习记录3，本文介绍如何使用 Webpack 开发 Vue 应用，从最基础的 Vue SFC 文件编译；到复用更多基础编译工具；再到 SSR、SSG 等高阶用法；以及如何借助vue cli 迅速搭建开发环境。
  • vue2项目webpack打包的优化策略，降低打包文件后的大小
    2023-06-27 22:10
    云边散步的博客 本来的：在mian.js中（这里的main.js是你的打包入口文件，你打包入口文件可能是main-prod.js）然后对于你的项目中的mian.js新建一个相同内容的js文件，然后将这2个mian.js文件分别命名为。首先，在项目的根目录下...
  • vue打包后显示空白正确处理方法
    2020-08-28 22:53
    Vue.js 是一个流行的前端框架，用于构建用户界面。在开发过程中，我们经常需要将 Vue 项目打包以便部署到生产环境。然而，有时在执行 `npm run build` 命令进行打包后，可能会遇到浏览器中显示空白页的问题。这个...
  • 没有解决我的问题, 去提问