前后端未分离的情况下，如何顺畅的使用 vue ?

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 1600 天前的主题，其中的信息可能已经有所发展或是发生改变。

前提

项目后端是 TP6 写的，前后端耦合
前端使用的 layui 框架
后面需求功能越来越复杂，但也是还处于单页面的状态

问题

有一个需要繁杂功能的页面，想说用 vue 框架去开发，然后打包成 xxx.php 文件
如何做到热更新？
多入口页面打包的方式跟后端耦合的弊端？

Vue

耦合

页面

打包

29 条回复 • 2020-08-11 18:12:17 +08:00

wa143825

2020-08-10 15:30:14 +08:00

learningman

2020-08-10 16:43:27 +08:00

如果不分离，你们就不能用 webpack 了。。。

xuanbg

2020-08-10 16:45:22 +08:00

不分离似乎没办法。vue 开发的项目也没法打包成 php 文件。

murmur

2020-08-10 16:46:53 +08:00

单页面引用，然后所有的数据都直接写死到页面里，data 里各种静态数据、全局变量，模板与 vue 齐飞，这事我以前 jquery 年代玩多了，没分离的问题就是 ajax 操作几乎不能用，所有的提交都是表单，挺奇怪的写法

murmur

2020-08-10 16:50:40 +08:00

谁说没分离不能 webpack，没分离一样用，webpack 也可以多入口，编译出多个 html 页面，jsp 也好、php 也好，本质上都是高端的 html，直接模板留好空，最后一步打包完改个文件名拷贝过去就完了，说白了，你的 html 里写了什么，不就是带 hash 的引用路径么，这堆文字只要填到对应的 php 和 jsp 里就可以了啊

zzzmh

2020-08-10 16:52:32 +08:00

java 来回复下
首先要确定 2 个方案选哪个
1. 继续用 xxx.php 文件来访问，这样的话只能是引入 js 依赖，然后就这样干写。
2. 使用 vue-cli webpack 打包，访问 index.html , 数据通过 axios 请求 json 接口的形式得到。

两种都能实现，需要考量你最终需要做到什么程度，打算花多大力气，以及是否需要照顾百度的智障 SEO

方案 2 市面上教程太多了，我不赘述
说下方案 1
可以参考 vue 官网 https://cn.vuejs.org/v2/guide/installation.html
直接引入依赖，然后一步步往下写

后端 php 生成的数据，渲染到 data 里即可

erwin985211

2020-08-10 17:02:48 +08:00

我来提供一个思路，用 vuecli 将 vue 项目打包成一个 web component

fanpei0121

2020-08-10 18:07:39 +08:00

<div id="ins"></div>
<script>
window.onload = function () {
new Vue({
el: "#ins",
data: function () {
return {
form: {
requestUrl: ""
},
dialogFormVisible: false
}
},
methods: {
get_ins: function () {
this.dialogFormVisible = false;
var _this = this;
$.ajax({
url: "http://{$go_api}/addIns",
dataType:"json",
async: false,
data: _this.form,
type:"POST",
success:function(req){
if(req.code == 1) {
_this.$message({
message: req.msg,
type: 'success'
});
}
},
})
},
add : function () {
this.dialogFormVisible = true;
this.form.requestUrl = ""
}
}
})
}
</script>

提供一个思路，页面引入 vue.js

ben1024

2020-08-10 18:16:39 +08:00

直接引用 vue.js
或者抽出一个 js 文件，然后嵌入进去，数据通过变量获取

LongMaoz

2020-08-10 18:27:54 +08:00

jq+vue+layui 齐飞，龟龟我已经想象到了页面代码的缠斗

xcstream

2020-08-10 18:30:21 +08:00

vue.min.js 一把梭
大不了再 iframe

devld

2020-08-10 18:53:08 +08:00 via Android

打出来的包，去掉 index.html
然后 mount 到你的 php 文件中的 div 上

demotu

2020-08-10 21:02:55 +08:00

把 vue 当做 jquery 用，页面引入，前端框架主要解决的还是 dom 与数据的关系

randyo

2020-08-10 23:31:35 +08:00 via Android

@LongMaoz 我用过。为了实现与现有 jq 插件一样的功能，直接用 vue 把 jq 插件包了一层，然后就不写 jq 了😂

EminemW

2020-08-10 23:37:33 +08:00

php 要完，最近接手公司一个 php 项目，前端页面还写 php 代码在里面，太难受了，还不知道函数参数是什么类型的

chouchoui

2020-08-10 23:53:18 +08:00

写过.net core razor page+layui+ts+vue 这种奇怪组合
最后结果是决定还是学前端吧

aaronlam

2020-08-11 00:05:27 +08:00

我在公司老项目就是直接把 Vue 当 jQuery 用。。

CoderGeek

2020-08-11 00:19:31 +08:00

当 jquery 用

pytth

2020-08-11 00:22:57 +08:00 via iPhone

那还不如用 jquery

shuimugan

2020-08-11 00:57:21 +08:00

这题我居然会，三年前主导过 Bootstrap + Jquery 转 Vue，也是在 PHP 端输出 HTML 。

首先是后端先把页面结构拆了，留一个页面主要结构，比如下面的：
```html
<body>
<div class="g-container"><?= $content ?></div>

// 其他公用 js 逻辑，比如加载 vue 文件
</body>
```

接下来主要是靠框架的 View 层去填充这个$content 。

比如一个文章列表页，可能是下面这样的一个 php 文件，里面内容是下面的
···php
<header-component></header-component>
<article-list-nav></article-list-nav>
<article-list-item></article-list-item>

<script>
// 先实例化 g-container 作为 vue 容器

// 接着并发加载各类组件
requirejs(["vue", "article-list-nav.js"，"article-list-item.js"], function (...) {// 组件加载完后的逻辑}
</script>
```

关键的来了，这里的组件标签主要用了 Vue 的动态模板，通过 requirejs 来并发动态获取 html 来填充的，每一个标签都对应着一小块 html 文件，这个小块的 html 里面还会插入 css 和自己的业务 js 。

为了极致性能，每个静态资源（ html 、js 、css 、图片等）都打包压缩了（文件名带版本号），包括你看到上面 requirejs 里那个数组，在打包的时候会插版本号进去，变成 article-list-nav-04a3838d2a.js 这样，Nginx 开了最大过期时间，打包完的所有资源放一个 json 里，这个 json 也是带版本号缓存的，而这个版本号是在发布构建的时候通过变量替换的。

做到了这些之后，每个组件都是自己独立的缓存，极致的本地缓存以及 http2 的多路复用，页面加载快得飞起。

同时这些事情做完了，在开发的时候每个 view 文件只需要输出上面的那种结构就好了，剩下都是安心写接口，前端自己的静态页面也是这样的，已经充分解耦了。

热更新其实是个伪命题，你直接做流量切换就好了。

shuimugan

2020-08-11 00:58:39 +08:00

补充一下上面的“打包完的所有资源放一个 json 里”，指的是静态资源的元数据

wooop

2020-08-11 01:09:09 +08:00

webpack 打包成 inde.html 然后 PHP 引入这个 html 我 10 年前的.net 后台就是这样用的

2kCS5c0b0ITXE5k2

2020-08-11 01:46:28 +08:00

我就是直接引入用直接把 vue 当 jq 用不用写样式直接用 ui 库来做页面数据提交用 axios 挺舒服的。。

ccraohng

2020-08-11 08:00:00 +08:00 via iPhone

类似 php jsp，自己可以写个 loader 本质上就是字符查找替换，然后把 htmlplugin 输出导向大到文件中

shuax

2020-08-11 09:13:21 +08:00

不分离也可以当做 jquery 用的

sarices

2020-08-11 09:53:46 +08:00

vue 没有说一定要打包才能用啊，你直接写到 html 里面就好了啊

hellolex

2020-08-11 09:55:04 +08:00

不分离是部署不分离吗？那不就开发完后构建一套 dist 丢给后端自行输出不就可以？

Tdy95

2020-08-11 11:01:49 +08:00

[http-vue-loader]( https://github.com/FranckFreiburger/http-vue-loader) 可以在线编译 vue 单文件，开发体验近似单页应用了。之前公司的老项目用过这个做渐进式开发升级。

redbuck

2020-08-11 18:12:17 +08:00

可以用 webpack 的.
我司后端.net-core,模板用 cshtml.
前端构建生成 js 与 cshtml,cshtml 引入 layout.cshtml 与 js.
同步数据可以塞到一个隐藏的 input 里提供给前端.异步就 ajax.

前端开发时通过 devserver 请求后端页面,爬到同步数据组装 html 返给开发环境,异步接口就 devServer 自带代理.

其余跟正常的前后端分离项目一样.