vue和TP5同域名下怎么部署??

发布于 2022-09-12 22:53:44 字数 1731 浏览 21 评论 0

前端使用vue-cli3 搭建的,后端使用TP5。但是它们的入口文件都不一样。

在配置的时候域名根目录要指向哪个入口文件呢?
要是指向vue的入口文件,那TP5的代码要放哪。要是指向TP5的public下的入口,vue是要放在public目录下吗?

以Apache配置为例:

<VirtualHost *:80>
    DocumentRoot "D:\phpweb\PHPTutorial\WWW\VueThinkPHP\admin\public"
    ServerName www.vuetp.com
    ServerAlias vuetp.com
  <Directory "D:\phpweb\PHPTutorial\WWW\VueThinkPHP\admin\public">
      Options FollowSymLinks ExecCGI
      AllowOverride All
      Order allow,deny
      Allow from all
      Require all granted
  </Directory>
</VirtualHost>

上面域名根目录指向TP5的public下的入口文件.
vue打包的时候

 publicPath: process.env.NODE_ENV === 'production' ? '/vue' : '/', 

所以把vue打包后的dist目录下的文件放在根目录下的vue文件夹下面也就是在TP5的public/vue下面。

要是这么部署的haul这里有两个问题:
1.直接访问域名请求的是TP5默认控制器对应的首页
2.vue请求接口不对:

在vue代码里我的请求是这样的 this.$http.get('/index/testApi')

因为在开发的时候在vue.config.js配置跨域请求测试接口我配置的是:

proxy: { 
  '/index': {
    target: 'http://www.tp.com',   // 请求测试接口域名
    ws: true,
    changeOrigin: true,  //是否跨域

    pathRewrite: {
      '^/index':'/index'  
    }
  }
}

但是由于我部署的时候前端代码是放在TP5的public/vue下面的。
所以 this.$http.get('/index/testApi') 请求的时候变成了
http://www.vuetp.com/vue/inde...;按照域名配置指向的根目录。接口地址应该是
http://www.vuetp.com/index/te...

所以在开发的时候这个请求的接口地址需要怎么配置呢;还有就是部署的时候域名指向的入口文件是要指向前端入口还是后端的入口呢?

因为我们在开发的时候,通过跨域配置很容易请求到接口数据。但是部署的时候根本不知道运维是如何部署的。要是按照我上面说的那样部署的话,就会出现接口地址请求错误。 到时候整个前端接口请求都需要改。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

∞琼窗梦回ˉ 2022-09-19 22:53:44

前后端分离,为什么要同一个域名,还部署在一个地方?

扬花落满肩 2022-09-19 22:53:44

我的问题和你的一样,不过我的是tp6,请问你是怎么解决的?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文