月度归档： 2020年4月

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来进行，然后线上版本通过在构建线上版本后，自动上传到服务器指定目录中，这样前后端的开发完全独立开了，互相做了代码保护。