Vue中如何配置static静态资源路径及解决样式问题？

本文共计591个文字，预计阅读时间需要3分钟。

我这就简化并修改一下原文内容，不超过100字：

不多说，直接看代码。路径配置：`path.resolve(__dirname, '..\dist')`，静态资源输出到二级目录`static`，CDN地址为`/`。

我就废话不多说了，大家还是直接看代码吧~

// Paths assetsRoot: path.resolve(__dirname, '../dist'), // 静态资源输出到二级目录下 assetsSubDirectory: 'static', // 静态资源cdn地址 assetsPublicPath: '/',

引用的时候可直接，不用返回上一级去查找，因为编译输出后的 static 下的资源 跟 html 是在同一个目录

<img class="navbar-brand-logo" src="static/logo.png"></a>

如果单个vue文件里的 style 没有用到 最好删除掉 不然 html页面会自动生成一个 空的style

补充知识：webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用

资源相对引用路径

问题描述

一般情况下，通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。

但当部署到带有文件夹的项目中，这种绝对路径就会出现问题，因为把配置的static文件夹当成了根路径，那么要解决这种问题，就得引用相对路径。