这是一个创建于 1890 天前的主题，其中的信息可能已经有所发展或是发生改变。
前提
- 项目后端是 TP6 写的，前后端耦合
- 前端使用的 layui 框架
- 后面需求功能越来越复杂，但也是还处于单页面的状态
问题
- 有一个需要繁杂功能的页面，想说用 vue 框架去开发，然后打包成 xxx.php 文件
- 如何做到热更新？
- 多入口页面打包的方式跟后端耦合的弊端？
 | 1 wa143825 2020-08-10 15:30:14 +08:00  5 <sricpt src="vue.min.js" /> |
 | 2 learningman 2020-08-10 16:43:27 +08:00 如果不分离，你们就不能用 webpack 了。。。 |
 | 3 xuanbg 2020-08-10 16:45:22 +08:00 不分离似乎没办法。vue 开发的项目也没法打包成 php 文件。 |
 | 4 murmur 2020-08-10 16:46:53 +08:00 单页面引用，然后所有的数据都直接写死到页面里，data 里各种静态数据、全局变量，模板与 vue 齐飞，这事我以前 jquery 年代玩多了，没分离的问题就是 ajax 操作几乎不能用，所有的提交都是表单，挺奇怪的写法 |
| 5 murmur 2020-08-10 16:50:40 +08:00 谁说没分离不能 webpack，没分离一样用，webpack 也可以多入口，编译出多个 html 页面，jsp 也好、php 也好，本质上都是高端的 html，直接模板留好空，最后一步打包完改个文件名拷贝过去就完了，说白了，你的 html 里写了什么，不就是带 hash 的引用路径么，这堆文字只要填到对应的 php 和 jsp 里就可以了啊 |
 | 6 zzzmh 2020-08-10 16:52:32 +08:00 1 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 里即可 |
 | 7 erwin985211 2020-08-10 17:02:48 +08:00 我来提供一个思路，用 vuecli 将 vue 项目打包成一个 web component |
 | 8 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 |
 | 9 ben1024 2020-08-10 18:16:39 +08:00 直接引用 vue.js 或者抽出一个 js 文件，然后嵌入进去，数据通过变量获取 |
 | 10 LongMaoz 2020-08-10 18:27:54 +08:00 jq+vue+layui 齐飞，龟龟我已经想象到了页面代码的缠斗 |
 | 11 xcstream 2020-08-10 18:30:21 +08:00 vue.min.js 一把梭 大不了再 iframe |
 | 12 devld 2020-08-10 18:53:08 +08:00 via Android 打出来的包，去掉 index.html 然后 mount 到你的 php 文件中的 div 上 |
 | 13 demotu 2020-08-10 21:02:55 +08:00 把 vue 当做 jquery 用，页面引入，前端框架主要解决的还是 dom 与数据的关系 |
 | 14 randyo 2020-08-10 23:31:35 +08:00 via Android @LongMaoz 我用过。为了实现与现有 jq 插件一样的功能，直接用 vue 把 jq 插件包了一层，然后就不写 jq 了 |
 | 15 EminemW 2020-08-10 23:37:33 +08:00 php 要完，最近接手公司一个 php 项目，前端页面还写 php 代码在里面，太难受了，还不知道函数参数是什么类型的 |
 | 16 GenericClass 2020-08-10 23:53:18 +08:00 写过.net core razor page+layui+ts+vue 这种奇怪组合 最后结果是决定还是学前端吧 |
 | 17 aaronlam 2020-08-11 00:05:27 +08:00 我在公司老项目就是直接把 Vue 当 jQuery 用。。 |
 | 18 CoderGeek 2020-08-11 00:19:31 +08:00 当 jquery 用 |
 | 19 liKeYunKeji 2020-08-11 00:22:57 +08:00 via iPhone 那还不如用 jquery |
 | 20 slowgen 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 文件只需要输出上面的那种结构就好了，剩下都是安心写接口，前端自己的静态页面也是这样的，已经充分解耦了。 热更新其实是个伪命题，你直接做流量切换就好了。 |
| 21 slowgen 2020-08-11 00:58:39 +08:00 补充一下上面的“打包完的所有资源放一个 json 里”，指的是静态资源的元数据 |
 | 23 2kCS5c0b0ITXE5k2 2020-08-11 01:46:28 +08:00 我就是直接引入用 直接把 vue 当 jq 用 不用写样式 直接用 ui 库来做页面 数据提交用 axios 挺舒服的。。 |
 | 24 ccraohng 2020-08-11 08:00:00 +08:00 via iPhone 类似 php jsp，自己可以写个 loader 本质上就是字符查找替换，然后把 htmlplugin 输出导向大到 文件中 |
 | 25 shuax 2020-08-11 09:13:21 +08:00 不分离也可以当做 jquery 用的 |
 | 26 sarices 2020-08-11 09:53:46 +08:00 vue 没有说一定要打包才能用啊，你直接写到 html 里面就好了啊 |
27
hellolex 2020-08-11 09:55:04 +08:00 不分离是部署不分离吗？那不就开发完后构建一套 dist 丢给后端自行输出不就可以？
 | 28 Tdy95 2020-08-11 11:01:49 +08:00 [http-vue-loader]( https://github.com/FranckFreiburger/http-vue-loader) 可以在线编译 vue 单文件，开发体验近似单页应用了。之前公司的老项目用过这个做渐进式开发升级。 |
Select Language