前言
介于大家最近在使用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: ‘./‘ “
- 我们在项目的根目录中,新建一个vue.config.js文件,如下
- 最后vue.config.js内容如下
1
2
3module.exports = {
assetsDir: './',
}