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

V2EX = way to explore

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

现在注册

已注册用户请登录

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

前提

项目后端是 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 自带代理.

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