前提
- 项目后端是 TP6 写的，前后端耦合
- 前端使用的 layui 框架
- 后面需求功能越来越复杂，但也是还处于单页面的状态
问题
- 有一个需要繁杂功能的页面，想说用 vue 框架去开发，然后打包成 xxx.php 文件
- 如何做到热更新？
- 多入口页面打包的方式跟后端耦合的弊端？
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
This topic created in 2275 days ago, the information mentioned may be changed or developed.
 |
1
<sricpt src="vue.min.js" />
|
5 |
learningmanAug 10, 2020
2
如果不分离，你们就不能用 webpack 了。。。
|
 |
xuanbgAug 10, 2020
3
不分离似乎没办法。vue 开发的项目也没法打包成 php 文件。
|
 |
murmurAug 10, 2020
4
单页面引用，然后所有的数据都直接写死到页面里，data 里各种静态数据、全局变量，模板与 vue 齐飞，这事我以前 jquery 年代玩多了，没分离的问题就是 ajax 操作几乎不能用，所有的提交都是表单，挺奇怪的写法
|
|
murmurAug 10, 2020
5
谁说没分离不能 webpack，没分离一样用，webpack 也可以多入口，编译出多个 html 页面，jsp 也好、php 也好，本质上都是高端的 html，直接模板留好空，最后一步打包完改个文件名拷贝过去就完了，说白了，你的 html 里写了什么，不就是带 hash 的引用路径么，这堆文字只要填到对应的 php 和 jsp 里就可以了啊
|
 |
6
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 里即可 |
 |
erwin985211Aug 10, 2020
7
我来提供一个思路，用 vuecli 将 vue 项目打包成一个 web component
|
 |
fanpei0121Aug 10, 2020
8
<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 |
 |
ben1024Aug 10, 2020
9
直接引用 vue.js
或者抽出一个 js 文件，然后嵌入进去，数据通过变量获取 |
 |
LongMaozAug 10, 2020
10
jq+vue+layui 齐飞，龟龟我已经想象到了页面代码的缠斗
|
 |
xcstreamAug 10, 2020
11
vue.min.js 一把梭
大不了再 iframe |
 |
devldAug 10, 2020 via Android
12
打出来的包，去掉 index.html
然后 mount 到你的 php 文件中的 div 上 |
 |
demotuAug 10, 2020
13
把 vue 当做 jquery 用，页面引入，前端框架主要解决的还是 dom 与数据的关系
|
 |
EminemWAug 10, 2020
15
php 要完，最近接手公司一个 php 项目，前端页面还写 php 代码在里面，太难受了，还不知道函数参数是什么类型的
|
 |
TarotVoyagerAug 10, 2020
16
写过.net core razor page+layui+ts+vue 这种奇怪组合
最后结果是决定还是学前端吧 |
 |
aaronlamAug 11, 2020
17
我在公司老项目就是直接把 Vue 当 jQuery 用。。
|
 |
CoderGeekAug 11, 2020
18
当 jquery 用
|
 |
liKeYunKejiAug 11, 2020 via iPhone
19
那还不如用 jquery
|
 |
20
这题我居然会，三年前主导过 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
补充一下上面的“打包完的所有资源放一个 json 里”，指的是静态资源的元数据
|
 |
2kCS5c0b0ITXE5k2Aug 11, 2020
23
我就是直接引入用 直接把 vue 当 jq 用 不用写样式 直接用 ui 库来做页面 数据提交用 axios 挺舒服的。。
|
 |
ccraohngAug 11, 2020 via iPhone
24
类似 php jsp，自己可以写个 loader 本质上就是字符查找替换，然后把 htmlplugin 输出导向大到 文件中
|
 |
momo1999Aug 11, 2020
25
不分离也可以当做 jquery 用的
|
 |
saricesAug 11, 2020
26
vue 没有说一定要打包才能用啊，你直接写到 html 里面就好了啊
|
 |
hellolexAug 11, 2020
27
不分离是部署不分离吗？那不就开发完后构建一套 dist 丢给后端自行输出不就可以？
|
 |
Tdy95Aug 11, 2020
28
[http-vue-loader]( https://github.com/FranckFreiburger/http-vue-loader) 可以在线编译 vue 单文件，开发体验近似单页应用了。之前公司的老项目用过这个做渐进式开发升级。
|
Select Language