vuecli3 build之后静态文件出现404

今天打包vue-cli3时，扔到服务器上面发现所有的资源都请求失败了，然后去根目录找配置文件，发现没有vue.config这个文件，只有一个babel.config.js这个文件，于是自己创建了一个vue.config文件如下：

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

然后再次打包，发现请求静态资源访问成功了。

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

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

vuecli3 build之后静态文件出现404-麒麟博客

vuecli3 build之后静态文件出现404-麒麟博客

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

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

vuecli3 build之后静态文件出现404-麒麟博客

vuecli3 build之后静态文件出现404-麒麟博客

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)

vuecli3 build之后静态文件出现404-麒麟博客

vuecli3 build之后静态文件出现404-麒麟博客

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

Vue CLI 配置参考

解决方法如下：

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

1. module.exports = {
2. // 选项…
3. }

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

4.3 参考配置：

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

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

vuecli3 build之后静态文件出现404-麒麟博客

vuecli3 build之后静态文件出现404-麒麟博客

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

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

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

axios.get('/newsList.json')

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

axios.get('newsList.json')

文章出自：https://blog.csdn.net/weixin_40141473/article/details/99671109