vue 部署域名二级目录配置记录

    vue-router 的两种前端基本访问模式 hash 和history 。hash 模式后面带#,打包的时候只需要把绝对路径(/)换成相对对路径(./),就可以部署在任何地方,不需要服务器配合,但是不好看,所以我们一般选择history 模式,但是history 模式需要配合服务器的部署。

    最近部署一个项目时,遇到一个问题,由于需要把项目部署在域名下的二级目录,所以需要进行一些修改配置,这里使用的是vue-router的history 模式。


在vue-cli3版本下,对部署在域名的二级目录下做四处的配置:

1. vue-router 路由的文件的配置,根据自己部署的二级目录填写 

 export default new VueRouter({

    mode:"history",

    base:"/web",


2.在vue.config.js配置文件(如果没有新建一个,项目根目录下)

 注意: baseUrl 从 Vue CLI 3.3 起已弃用,请使用publicPath。


module.exports = {

  publicPath:"/web"

}

 

3.在入口文件中index.html 的head 标签内加入 

 <meta base ="/web/">

 

4.最后就是部署配置,以nginx 为例   

复制代码

server {

    listen 80;

    server_name localhost;

    root /home/wwwroot/;

    location /web {

        try_files $uri $uri/ /web/index.html;

    }

}

到此,配置和部署已经完成了,将打包好的前端静态资源放在域名指定的根目录下的二级(多级目录配置同上)录即可,注意,以上配置是针对在history模式,部署在域名下的二级目录以上的 配置,hash 模式 和 history 模式部署在域名根目录不需要那么多配置


网友评论

8条评论

发表

网友评论

8条评论

发表

最新评论

05月31日 17:15

rust 5 0

老七快跑

05月31日 11:03

Liux 4 0

看不懂,溜了

05月28日 15:19

longdechuanren 3 0

可以的

05月26日 09:34

05月26日 09:25

05月21日 16:38

05月21日 16:19

推荐文章

彩龙

Copyright © 2008-2020 彩龙社区(https://www.clzg.cn) 版权所有 All Rights Reserved.

免责声明: 本网不承担任何由内容提供商提供的信息所引起的争议和法律责任。

经营许可证编号:滇B2-20090009-7

下载我家昆明APP 下载彩龙社区APP