vue cli3.0打包上线静态资源找不到路径的解决操作

下面是关于“vue cli3.0打包上线静态资源找不到路径的解决操作”的攻略:

问题描述

在使用Vue CLI 3.0生成的项目中,经过打包上线后,静态资源(如图片、CSS、JS等文件)找不到路径,页面显示不正常的问题。

解决步骤

为了解决这个问题,我们需要进行以下步骤:

1. 修改配置文件

打开项目中的vue.config.js配置文件,添加如下代码:

module.exports = {
  publicPath: './'
}

其中publicPath用来指定打包后静态资源的路径,.表示相对于当前目录。

2. 打包项目

在项目根目录中运行以下命令进行打包:

npm run build

3. 部署到服务器

将生成的dist目录下的文件部署到服务器上,确保资源文件路径正确。

4. 示例展示

示例1

假设我们有一个图片文件夹,图片路径为:/static/img/logo.png,在模板中使用如下路径加载图片:

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

此时,使用上述方法打包后,静态资源文件路径就会变成相对路径,修改后代码如下:

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

示例2

假设我们在项目中使用了ant-design-vue组件库,有以下代码:

import 'ant-design-vue/dist/antd.css'

此时,使用上述方法打包后,CSS文件路径就会变成相对路径,在页面加载时找不到CSS文件。为了解决这个问题,需要修改代码如下:

import '@/assets/css/antd.css'

其中@表示的是src目录,将需要使用的CSS文件移动到src/assets/css目录下。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue cli3.0打包上线静态资源找不到路径的解决操作 - Python技术站

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

相关文章

  • vue3中使用router4 keepalive的问题

    请跟我一起详细了解“vue3中使用router4 keepalive的问题”的完整攻略。 什么是keep-alive <keep-alive>是Vue.js提供的一个内置组件,它用于缓存组件,可以防止组件重复渲染以提高性能。<keep-alive>的最常用法是动态地根据路由渲染不同的组件,例如: <template> &l…

    Vue 2023年5月27日
    00
  • vue实现一个炫酷的日历组件

    下面是详细的攻略,首先需要明确的是,实现一个炫酷的日历组件需要涉及到许多知识点,包括 Vue 组件化、CSS 动画、日期计算等等。因此,分别从这些方面来介绍实现过程。 1. Vue 组件化 首先,我们需要将日历组件拆分成多个组件,以便于管理和复用。 组件分为年、月、日期三个层级。 Year.vue: <template> <div clas…

    Vue 2023年5月28日
    00
  • Vue.js列表渲染绑定jQuery插件的正确姿势

    Vue.js是一个流行的JavaScript框架,它提供了快速、简单、可复用的前端开发方式。在Vue.js应用中,我们经常需要渲染长列表或表格,这是一个常见的需求。我们可以使用jQuery插件来增强这些列表或表格的功能,但是,Vue.js和jQuery是两种不同的JavaScript库,这意味着我们需要正确地将它们集成到我们的应用中才能实现最优的效果。 下面…

    Vue 2023年5月29日
    00
  • vue props传值失败 输出undefined的解决方法

    关于“vue props传值失败 输出undefined的解决方法”的详细讲解可以分为以下几个步骤: 1.检查父组件传递的属性名和子组件接收的属性名是否完全一致 在Vue中,父组件通过v-bind绑定的属性名会作为子组件中由props声明的变量名来接收。因此,如果属性名不一致,子组件接收到的值就是undefined。 示例: 在父组件中,我们声明一个数据属性…

    Vue 2023年5月29日
    00
  • Vue虚拟DOM详细介绍

    Vue虚拟DOM详细介绍 什么是虚拟DOM 虚拟DOM(Virtual DOM)是指用JavaScript对象模拟真实DOM的一种技术。在Vue中,全部视图都是通过虚拟DOM来实现。 由于真实DOM对于JavaScript的操作过于频繁,因此虚拟DOM被设计出来,用于减少频繁操作真实DOM的次数。当数据发生变化时,Vue先对虚拟DOM进行操作,再通过diff…

    Vue 2023年5月28日
    00
  • vue+quasar使用递归实现动态多级菜单

    使用递归实现动态多级菜单通常用在需要动态循环渲染多级菜单的场景中,常见的应用场景包括权限管理系统或者多层级的导航菜单。 下面将介绍使用Vue.js和Quasar框架实现递归渲染多级菜单的完整攻略。 创建数据结构 首先需要定义一个数据结构来表示多级菜单,可以使用一个包含名称、路由等属性的对象。 { name: ‘菜单名称’, route: ‘路由地址’, ch…

    Vue 2023年5月28日
    00
  • 简单的vue-resourse获取json并应用到模板示例

    下面我为您讲解如何使用vue-resource获取JSON并应用到模板中。 1. 安装vue-resource 在开始之前,首先需要安装vue-resource。可以通过以下命令在命令行中安装: npm install vue-resource –save 2. 引入vue-resource 安装完成后,需要在Vue项目中引入vue-resource。可以…

    Vue 2023年5月28日
    00
  • Vue Router 实现动态路由和常见问题及解决方法

    让我来详细讲解一下“Vue Router 实现动态路由和常见问题及解决方法”的完整攻略。 一、动态路由的实现 1. 动态路由的定义 Vue Router 的动态路由,是指路由路径中包含变量的路由。例如,我们需要设计一个新闻详情页的路由,每篇新闻的 ID 都不同,我们可以在路由路径中使用变量表示这个 ID,例如 /news/:id。 2. 动态路由的示例 Vu…

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