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')

项目地址

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章