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目录下。