Vue项目打包后除了第一个页面其余全部404

问题起源:

这几天心血来潮,决定将博客改版,用Vue+SpringBoot把博客改成前后端分离的。没有系统学过Vue,就是看了一些视频直接写的。写了一天多的Vue前端,结果在打包部署的时候遇到了问题:打包以后部署在nginx上,首页是可以正常显示的,但是点其他页面无法显示,全部是显示404NOT FOUND。搞了一下午一晚上也没搞定,最后终于在第二天早上看了一篇文章搞定了。

解决过程:

我看了一下network里的请求,发现remoteAddress都是前端服务器地址,百度了一些就以为是跨域的问题,结果配置了代理,没用。

看了好多文章说一些什么vue.config.js的配置问题,什么config文件夹下的index.js配置问题,结果我这项目目录下压根它也没有这些配置文件啊,对这些配置文件也是一点不了解,头秃。。。

来到官网:https://www.sogou.com/link?url=hedJjaC291NA4zbHKlAAkwr4sXjsZK93w9VE6AbE6s2t5pUc3zy0dg…

看了文档才逐渐了解一些配置的属性。

vue.config.js

vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。

这个文件应该导出一个包含了选项的对象:

// vue.config.js
module.exports = {
  // 选项...
}
baseUrl

从 Vue CLI 3.3 起已弃用,请使用publicPath

publicPath
  • Type: string

  • Default: '/'

    部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致,但是 Vue CLI 在一些其他地方也需要用到这个值,所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath

    默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 publicPath/my-app/

    这个值也可以被设置为空字符串 ('') 或是相对路径 ('./'),这样所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径,也可以用在类似 Cordova hybrid 应用的文件系统中。

    相对 publicPath 的限制

    相对路径的 publicPath 有一些使用上的限制。在以下情况下,应当避免使用相对 publicPath:

    • 当使用基于 HTML5 history.pushState 的路由时;
    • 当使用 pages 选项构建多页面应用时。

    这个值在开发环境下同样生效。如果你想把开发服务器架设在根路径,你可以使用一个条件式的值:

    module.exports = {
      publicPath: process.env.NODE_ENV === 'production'
        ? '/production-sub-path/'
        : '/'
    }
    

问题解决:

最后我是在项目根目录下新建vue.config.js,在文件里面加入以下内容:

module.exports = {
    publicPath: "/", //部署应用包时的基本 URL
    outputDir: "dist", //打包目录
    indexPath: "index.html",
};

网上很多说要把 publicPath: “/”,改成 publicPath: “./”,但我试了很多次都不行,还是要写成 “/”

并且在nginx目录的conf/nginx.conf文件中作如下配置:

location / {
            root   html;
            index  index.html index.htm;
			try_files $uri $uri/ /index.html;
	//在里面加了一句:try_files $uri $uri/ /index.html;
        }

最终将打包好的dist文件夹里的css、fonts、js、favicon.ico、index.html扔到nginx的html文件夹下,即可正常访问项目。

date: 2020-07-11 18:00:35

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值