详解vue静态资源打包中的坑与解决方案

接下来我将详细讲解“详解vue静态资源打包中的坑与解决方案”的完整攻略。

一、问题描述

Vue开发中,经常需要使用一些静态资源,如图片、字体等。但是,当我们将Vue项目打包后,这些静态资源文件在文件系统中的路径就会变化,这就会导致引用不到这些资源从而导致网页无法正确显示。

二、原因分析

静态资源路径问题通常由Webpack打包机制引起的。Webpack 在将代码打包压缩时,会基于“依赖图谱”来决定每个依赖项在 bundle 中的位置,因此在处理静态资源路径时也会遵循这一机制。具体来说,当Webpack在处理代码中的静态资源引用时,会将资源从源代码路径中复制到打包文件夹中,并在HTML文件中自动插入相应的路径,但是默认情况下它并不支持在index.html指定contextRoot,需要手动配置。

三、解决方案

我们可以通过以下两种方式来解决这个问题。

方案一:使用vue.config.js中的publicPath属性

Vue Cli 3.x默认把静态资源存放在public文件夹中,因此我们可以通过设定publicPath来更好地处理静态资源路径。publicPath是一个在 index.html中引入的公共路径,它也会在构建之前被插入到所有(URL)里面。具体操作方式如下:

  1. 在Vue工程目录下新建vue.config.js文件,内容如下:
module.exports = {
  publicPath: './',
}
  1. 使用正斜杠代替相对路径

一旦设定了publicPath为./,在 HTML、CSS、JS 文件中的相对路径(../../xxx.css)都会被解析为(./../../xxx.css)。因此,我们在引用静态资源时只需使用正斜杠代替相对路径即可:

<img src="/assets/logo.png" alt="logo">

方案二:将所有静态资源放入assets文件夹中

这是另一种推荐的做法,我们可以将所有静态资源都放在assets文件夹下,通过assets/js、assets/css、assets/images这样的目录结构来管理这些资源,同时在构建时加入对应的Webpck loader来编译、压缩这些资源。这种方法的好处是可以方便地统一管理静态资源文件,并且可以更好地避免资源路径问题。

具体操作如下:

  1. 在 Vue 工程目录下,创建assets文件夹

  2. 在assets/js、assets/css、assets/images目录下分别添加js、css和图片文件

  3. 在vue.config.js中添加loader配置,这里以压缩图片的loader为例

let path = require('path')

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          use: [
            {
              loader: 'image-webpack-loader',
              options: {
                bypassOnDebug: true,
                disable: true,
                mozjpeg: {
                  progressive: true,
                  quality: 75
                },
                optipng: {
                  enabled: false,
                },
                pngquant: {
                  quality: [0.75, 0.9],
                  speed: 4
                },
                gifsicle: {
                  interlaced: false,
                },
                webp: {
                  quality: 75
                }
              }
            }
          ]
        }
      ]
    }
  }
}

四、总结

通过以上两种方法,我们可以很好的解决Vue静态资源路径打包问题。但是需要注意的是,如果我们使用了相对路径,那么在部署时,我们需要确保部署到的目录与路径是一致的。因此,在使用Vue进行开发时,我们应该尽量避免使用相对路径。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:详解vue静态资源打包中的坑与解决方案 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • 简单谈一谈Vue中render函数

    当我们通过模板来渲染Vue组件时,Vue框架内部会将其编译成render函数执行。而render函数是Vue中的核心函数,我们可以自己手动编写render函数来实现更加灵活的渲染效果。 一、render函数基础 1.1 什么是render函数 Vue中的render函数是用来创建虚拟DOM的函数。它接受一个“createElement”函数作为参数用来构建D…

    Vue 2023年5月28日
    00
  • Vue获取表单数据的方法

    当使用Vue开发Web应用时,我们经常需要从表单中获取用户输入的数据。下面是几种Vue获取表单数据的方法的完整攻略: 1.使用v-model指令获取表单数据 我们可以在表单元素上使用v-model指令,Vue会自动为我们管理和更新表单元素的值。要使用v-model指令获取表单值,我们需要为表单元素绑定v-model指令,将其值绑定到Vue组件实例中的一个属性…

    Vue 2023年5月27日
    00
  • antd-DatePicker组件获取时间值,及相关设置方式

    下面是Antd-DatePicker组件获取时间值及相关设置方式的完整攻略。 获取时间值 Antd-DatePicker组件可以方便地获取用户选择的日期或时间。你可以使用onChange回调函数来获取所选日期或时间值。 下面是一个例子,当用户选择日期时,会将所选日期值打印出来: import { DatePicker } from ‘antd’; funct…

    Vue 2023年5月29日
    00
  • vue项目实战之优雅使用axios

    下面是详细讲解 “Vue项目实战之优雅使用axios”的攻略: 一、什么是axios axios是一个基于Promise的http库,它可以在浏览器和Node.js中发送AJAX请求。axios可以让我们以一种更优雅的方式和服务器进行交互,并且支持Promise API,能够让我们在处理异步请求时更加方便和可控。 二、axios在Vue中的应用 1. 安装a…

    Vue 2023年5月28日
    00
  • 详解VUE中的插值( Interpolation)语法

    下面是“详解VUE中的插值(Interpolation)语法”的攻略: 1. 什么是插值语法? 插值是一种模板引擎语法,用于将数据绑定到文本或属性中。在Vue中,插值语法可以用双大括号{{}}来表示,可以在HTML文本中任意使用。 例如,在Vue模板中,我们可以使用插值语法将data数据绑定到html标签中: <div> {{message}} …

    Vue 2023年5月27日
    00
  • 详解Vue 2.0封装axios笔记

    那么让我们来详细讲解下“详解Vue 2.0封装axios笔记”的完整攻略吧。 标题 首先,我们需要给这个攻略添加一个标题,比如说,“Vue 2.0封装axios完整攻略”。 介绍 在正式开始之前,我们先来介绍一下Vue 2.0和axios。 Vue 2.0是什么 Vue 2.0是一个轻量级的JavaScript框架,用于构建交互式的Web应用程序。它的核心是…

    Vue 2023年5月28日
    00
  • Vue3后台管理系统之创建和配置项目

    下面是对“Vue3后台管理系统之创建和配置项目”的完整攻略: 一、安装Node.js和Vue CLI 在官网https://nodejs.org/下载并安装最新版的Node.js。 打开终端或命令行,运行以下命令安装Vue CLI: npm install -g @vue/cli 验证Vue CLI是否安装成功,运行以下命令: vue –version 如…

    Vue 2023年5月28日
    00
  • 详解如何制作并发布一个vue的组件的npm包

    制作并发布一个 Vue 的组件 npm 包,流程大致如下: 初始化项目并创建组件 编写组件原型并打包 发布 npm 包 下面将详细解释这些步骤。 初始化项目并创建组件 将组件发布到 npm 前,首先需要初始化本地项目,并创建一个 Vue 组件。我们可以使用 Vue CLI 工具来初始化项目,具体步骤如下: 安装 Vue CLI:npm install -g …

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部