vue部署到nginx的location配置(可以在不同路径刷新404)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/fuck487/article/details/86479510

官网:https://router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子

我项目中设置vue路由为history模式,项目就会少了地址栏的#号,比较美观,同时也会存在一系列问题。部署到nginx后会存在刷新404的问题。所以想用好该模式需要后端配合。官网有说明的

nginx的配置

修改nginx的location配置,使用try_files直接指定到index.html文件

location / {
            # root 根目录,默认nginx下的html文件夹,可以指定其他
            root   ./html;
            index  index.html;
            # vue的路由并不是真实物理路由,所以用try_files,路径都指向根目录下的index.html
            try_files $uri $uri/ /index.html;
        }

root:随便指定一个目录,目录下存放vue构建后的文件

index:指定的首页文件

try_files:因为vue的路由都是从index.html作为入口,所以用try_files就对了

 

js、css等引入失败

js、css等文件路径加载有误,跟地址栏的路由拼接起来作为js、css的目录了。找了很多资料,后来发现,是因为我的配置中使用了相对路径

 

查找很久,刚开始以为是nginx的锅,后来才发现,原来是我改成相对路径导致的

assetsPublicPath: './',

项目中config文件夹下index.js中,默认是"/",因为本地打开build时页面空白,所以修改成相对路径"./",结果影响到部署服务器了。因为我的路由模式是history,而且存在多个子路由。所以应该改成绝对路径。才能正常引入vue编译后的js、css文件

改成

assetsPublicPath: '/',

一切正常

 

展开阅读全文

没有更多推荐了,返回首页