在后端代码(以 uliweb 为例)里嵌入纯前端代码(以 vue 为例)的开发方式 - V2EX

Home Sign Up Sign In

推荐学习书目

› Learn Python the Hard Way

Python Sites

› PyPI - Python Package Index

› http://diveintopython.org/toc/index.html

› Pocoo

值得关注的项目

› PyPy

› Celery

› Jinja2

› Read the Docs

› gevent

› pyenv

› Stackless Python

› Beautiful Soup

› 结巴中文分词

› Green Unicorn

› Sentry

› Shovel

› pytest

Python 编程

› pep8 Checker

Styles

› PEP 8

› Google Python Style Guide

› Code Style from The Hitchhiker's Guide

This topic created in 2778 days ago, the information mentioned may be changed or developed.

我很不喜欢调试的时候后端和前端的调试服务器都开着,因为是两个端口还要搞跨域,所以试试直接在后端代码里嵌入纯前端的应用

大概做法是
- 把前端用 webpack 之类 build 出来的文件配置输出到后端能 serve 的 static 目录下
- 用 nodejs 里的 watch 监控前端源代码变化并 build

不好的地方:
- 感觉这种编译会稍慢一些,比前端的调试服务器用增量编译并用 websocket 传到页面慢不少
- static 文件会有缓存,所以调试的时候要强制刷新( ctrl+shift+r) 或者浏览器里禁用 cache

比较适合于我们这种本来是后端程序员,但是也想用纯前端开发的伪全栈

具体例子代码: https://github.com/zhangchunlin/node_in_uliweb_example

22 replies • 2018-11-05 13:38:55 +08:00

1

Trim21

Nov 3, 2018 via Android

webpack 有 proxy table 解决跨域问题…

2

TomatoFish

Nov 3, 2018

我配了个 nginx 来转发，主要是头一次配置的时候花些时间

3

TabGre

Nov 3, 2018 via iPhone

我是前端，我会花 2 分钟配置 Nginx 转发

4

carlclone

Nov 3, 2018

Laravel 就是这样做的...官方出了一套 mix 把 vue/react 之类的按需整合进去了

5

clino

OP

Nov 3, 2018

@carlclone 是说这个吗? https://laravel.com/docs/5.7/mix
看到了 watch,感觉像,但是看起来有点复杂不知道为什么

6

akatquas

Nov 3, 2018 via iPhone

前后端分离的话就要把 proxy 解决掉，不然就用 ssr 来做。

不过也可以试试 next+egg 的思路

7

PythonAnswer

Nov 4, 2018 via iPhone

看过好几个这样搞的了，坏处是出来的东西都是一个样，耦合紧

8

kran

Nov 4, 2018 via iPhone

看到 uliweb，想起年轻的时候，〒_〒

9

FakeLeung

Nov 4, 2018 via Android

webpack 的 devserver 中的 proxy 了解一下？

10

FrankFang128

Nov 4, 2018

你看 Rails 开发者就不用关心这些无聊的配置，rails server + bin/webpack-dev-server 运行一下就开干。

11

yuanfnadi

Nov 4, 2018 via iPhone

突然发现我好像写过这样的项目，vue build 完成以后拷贝到 springboot 的静态目录。

12

clino

OP

Nov 4, 2018 via Android

@akatquas 我这是另一个选择，不用折腾 proxy
你说的 ssr next egg 都不了解，有空了解下

13

clino

OP

Nov 4, 2018 via Android

@PythonAnswer 为什么这样就会耦合紧？这只是调试部署上的调整，和具体开发关系不大

14

lancelock

Nov 4, 2018 via iPhone

我也在研究这问题，感觉还是开发的时候分开，部署的时候打包到 static 里好，因为每次 static 更新都要重新编译。webpack 是有 proxy，但我用的 parcel。有没有用 parcel 的大佬说说怎么配代理吗

15

Sparetire

Nov 4, 2018 via Android

搞跨域不就是一个 CORS 的事情吗。。就算不用 webpack 的 proxy，自己手撸一个简单的代理或者带 CORS 的 mock server 做成 cli 放 npm script 里，一次撸完以后每次项目都能用到不是也很方便。。

16

clino

OP

Nov 4, 2018

@lancelock "因为每次 static 更新都要重新编译" 不明白你说的是什么意思,我这里只要 build 输出到 static 目录下就行了

17

lancelock

Nov 4, 2018 via iPhone

@clino 你是 python 吧？确实动态语言不需要。我是写 java 的，修改代码需要编译一下才能生效，有时候还得重启

18

clino

OP

Nov 4, 2018

@lancelock 这个和静态和动态语言没关系,而是和调试服务器的实现有关系吧,如果调试服务器不提前加载 static 文件列表,而是实时去取文件路径下的文件就不用重启

19

clino

OP

Nov 4, 2018

@Sparetire 调试的时候跨域,但是部署的时候实际上不跨域,这样造成调试和部署的时候不一致,对这个我觉得很不舒服.

20

ala2008

Nov 5, 2018

ci、cd 很麻烦，试过 build 慢死。。

21

clino

OP

Nov 5, 2018

@ala2008 ci cd 这方面没什么差别吧,都要从头 build

22

ala2008

Nov 5, 2018

@clino 分开 build

About · Help · Advertise · Blog · API · FAQ · Solana · 5321 Online Highest 6679 ·

Select Language

创意工作者们的社区

World is powered by solitude

VERSION: 3.9.8.5 · 55ms · UTC 07:49 · PVG 15:49 · LAX 00:49 · JFK 03:49
♥ Do have faith in what you're doing.