前言

介于大家最近在使用vue-cli3搭建项目，期间可能会遇到静态资源路径的问题，而导致打包后页面空白

1.vue-cli3默认的配置比vue-cli2更加简洁
2.移除的配置文件根目录下的，build和config等目录
3.除了static文件夹，新增了public文件夹，并且index.html移动到public中
4.大部分配置都集成到 vue.config.js 文件中（vue.config.js需要在根目录中新建）

说明

vue-cli3默认的静态资源路径配置是一个斜杆 “ assetsDir: ‘/‘“ 也就是相对路径，这里的相对路径 “/“ 指的是在该域名或者该某个服务下的相对路径，但如果我们打包后是想直接打开 “index.html” 来看的话肯定是加载不到静态资源的，因为在本地我们的根目录是以 “ file://xxxx “ 这种形式的方式打开，显然也就为什么加载不到我们的资源文件了

解决

言归正传，我们只需要改成这种基于本地文件的相对路径即可 “ assetsDir: ‘./‘ “

  1. 我们在项目的根目录中，新建一个vue.config.js文件,如下
  2. 最后vue.config.js内容如下
    1
    2
    3
    module.exports = {
      assetsDir: './',
    }

最后

附上vue-cli3官网文档