vue-cli3项目打包时，静态资源请求失败 404

骑猪看日落 2021-10-23 19:26 1540阅读 0赞

1. 首先放一张项目的目录：

*  public文件夹 存放 index.html以及一些json文件。
 *  src -> assets 文件夹下存放一些需要的图片。
 *  src -> components 文件夹下存放每个模块的组件。
 *  src 目录下是App.vue、main.js、router.js、store.js文件。

![20190816091639655.png][]

2. 在执行 npm run build 后，项目多了一个dist文件夹。

对比打包前，可以看到文件相应的存放位置。

![2019081609223257.png][]

3.此时打开dist里的index.html文件，显示的是空页面。查看报错：

>  *  Refused to apply style from 'http://localhost:63342/css/app.c72333b2.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
>  *  Failed to load resource: the server responded with a status of 404 (Not Found)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDE0MTQ3Mw_size_16_color_FFFFFF_t_70][]

4. 现在去官网查一下文档。

[Vue CLI 配置参考][Vue CLI]

解决方法如下：

4.1 在根目录下创建一个  vue.config.js 文件，修改配置。

module.exports = {
      // 选项...
    }

4.2 注意：从 Vue CLI 3.3 起已弃用baseURL，请使用[`publicPath`][publicPath]。

4.3 参考配置：

module.exports = {
        // 基本路径
        publicPath:"./",  // 可以设置成相对路径，这样所有的资源都会被链接为相对路径，打出来的包可以被部署在任意路径
        outputDir:"dist",  //打包时生成的生产环境构建文件的目录
        assetsDir: 'public',  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
        /*devServer: {
            proxy: 'http://localhost:8080'
        }*/
    }

4.4 运行 npm run build 后生成的dist文件夹：

![20190816093936659.png][]

此时 打开 index.html 可以正常显示。

--------------------

PS：在项目中，一些模块还用axios请求了本地的json文件。经过上面的配置后，只有json数据无法请求，一直报404。

后来经检查发现，请求的时候，请求路径为相对路径

axios.get('/newsList.json')

换成绝对路径后就可以请求成功了。

axios.get('newsList.json')

--------------------

[项目地址][Link 1]

[20190816091639655.png]: /images/20211023/36f404e220004588b83f7c28a3218053.png
[2019081609223257.png]: /images/20211023/8371de650c864a40a7d4cad13aaf1098.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDE0MTQ3Mw_size_16_color_FFFFFF_t_70]: /images/20211023/a156d6711f40491885776965dafef7af.png
[Vue CLI]: https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
[publicPath]: https://cli.vuejs.org/zh/config/#publicPath
[20190816093936659.png]: /images/20211023/2cbcbd1fb9cf4485a1579b7b4243f57c.png
[Link 1]: https://github.com/Allison-LYP/vuecli3-project