laravel 与 vue 集成开发

laravel 可以通过mix调用webpack集成打包然后打包vue应用, 我之前的模式都是这样来打包element-ui的。

我对webpack和npm都不熟悉,而laravel自带了一份package.json,虽然通过合并定制mix.js文件也都可以实现, 但前端的开发还是想直接在前端的开发环境中完成,而不是和后端绑定的很紧密。虽然这种情况不适合我,因为我大都 前后端都要弄,但我还是想要分开。

以element-admin为例, 我希望前端就只负责前端开发就行了,后端只负责接口就可以了。

对于开发环境,开发人员通过http://url/dev 直接进入, 这个直接就转发到开发人员的环境中了。

对于线上环境,开发人员打包完成,上传到指定目录, 然后线上环境使用打包出来的文件。

我前端的web端使用的是nginx, 在里面添加下面的配置(为dev服务):

location /sockjs-node/ {
proxy_pass http://npm:9526;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection “Upgrade”;
proxy_set_header Host localhost;
#proxy_set_header X-Real-IP $remote_addr;
#proxy_set_header X-Forwarded-Host localhost;
#proxy_set_header X-Forwarded-Server localhost;
#proxy_set_header X-Forwarded-Proto $scheme;
#proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Origin localhost;
proxy_hide_header Access-Control-Allow-Origin;
add_header Access-control-Allow-Origin “*”;
}
location /dev {
proxy_pass http://npm:9526/static/index.html;
proxy_set_header Host localhost;
proxy_set_header Origin localhost;
proxy_hide_header Access-Control-Allow-Origin;
add_header Access-control-Allow-Origin “*”;
}
location /static/ {
proxy_pass http://npm:9526/static/;
proxy_set_header Host localhost;
proxy_set_header Origin localhost;
proxy_hide_header Access-Control-Allow-Origin;
add_header Access-control-Allow-Origin “*”;

}

线上环境,可以将打包的文件放到public目录中(比如dist目录),然后在laravel中添加一个返回html文件的路由,这样可以隐藏index.html文件,打包的时候注意publicpath要对(比如为/dist/)

这样开发的时候,直接通过/dev来进行,然后线上版本通过在构建线上版本后,自动上传到服务器指定目录中,这样前后端的开发完全独立开了,互相做了代码保护。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据