vue如何部署二级目录

有的时候,我们的域名很珍贵,除了二级域名外。
我们不仅可以把项目部署到当前域名下 也可以部署到二级目录下,这样的话,就可以部署多个项目了。
比如说,我有一个域名为sslcsq.com的服务器,我想部署两个项目:
京东项目:http://sslcsq.com/jingdong
淘宝项目:http://sslcsq.com/taobao

说一下这里会遇到得问题

普通项目不会有问题,
但是如果是单页项目(比如vue写的单页面),而且单页项目的路由用的是history模式,不管是vue还是react都会出现一个问题
那就是“刷新当前页面404”
这是因为这种(history)模式会被错误的认为向服务端发出了真请求,但是其实这这是前端路由变化,后端自然也没做好相应你的处理,所以就404了

如何解决

前端配置(前端看这就行了,后面找后台配置)
vue.config.js中增加如下配置:

publicPath: '/taobao/'                   这里就是配置的二级目录

路由配置如下:

const router = new VueRouter({
  mode: 'history',
  base:'/taobao/',                          这里就是配置的二级目录
  routes
})

后端nginx.conf配置如下:(注意前后端沟通~)

# 首先给要部署的项目分配一个服务
  server {
    listen 8001;
    location / {
        # vue h5 history mode 时配置
        try_files $uri $uri/ /index.html;
        root html/caspage;
        index index.html index.htm;
    }
}

  # 再到配置域名的主配置server上做反向代理 
server {
    listen       80;
    server_name  localhost; 
    location / {
        root   html;
        index  index.html index.htm;
        # vue-router的history模式下,刷新页面404处理
        try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
   
     
     # 这里是需要部署的二级目录应用配置
     location /cloudChartPage {
        alias /data/cloudChartPage/;
        index  index.html index.htm;
        try_files $uri $uri/ /cloudChartPage/index.html;
     }
}

新启动然后访问就可以http://sslcsq.com/taobao 或者 http://sslcsq.com/京东 看你的二级目录配置的什么了

  • 5
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
vue2中,如果要在部署时使用路由的history模式,并且要将应用部署在二级目录中,需要进行以下配置。 首先,在vue项目的根目录下找到并打开`vue.config.js`文件,如果没有则需要新建一个。 然后,在`vue.config.js`文件中进行如下配置: ```javascript module.exports = { publicPath: '/二级目录名称/' } ``` 其中,`二级目录名称`即你希望应用部署在的二级目录的名称,例如如果希望部署在`www.example.com/myapp/`下,则`二级目录名称`应为`myapp`。 接下来,在路由配置文件中,通常是`src/router/index.js`文件中,需要设置`base`选项,指定应用的基础 URL。 ```javascript import Vue from 'vue' import Router from 'vue-router' import Home from '@/views/Home.vue' Vue.use(Router) export default new Router({ mode: 'history', base: '/二级目录名称/', routes: [ { path: '/', name: 'Home', component: Home } ] }) ``` 在这里,将`mode`设置为`history`,表示使用history模式;将`base`设置为`'/二级目录名称/'`,与之前的配置保持一致。 这样,在部署项目时,将整个项目文件夹拷贝至服务器的二级目录中,并配置好服务器的相关环境,就可以通过访问`www.example.com/二级目录名称/`来访问应用了。 需要注意的是,使用history模式需要服务器的支持,例如针对Apache服务器,需要配置`mod_rewrite`模块,以确保应用能够正确处理路由。如果你使用的是其他类型的服务器,可以查阅相关文档来了解如何配置。 以上就是在vue2中使用路由的history模式部署在二级目录中的方法。希望对你有帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值