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

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

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

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

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

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)

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

Vue CLI 配置参考

解决方法如下：

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

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

   4.2 注意：从 Vue CLI 3.3 起已弃用baseURL，请使用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文件夹：

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

---

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

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

axios.get('/newsList.json')

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

axios.get('newsList.json')

---

项目地址