laravel+deploy+前端vue打包文件部署（vue分享，去除#号）

90使用场景：
前端使用vue,后端使用laravel5.5，部署方式使用deploy,因为前端需要使用微信分享，传到后台的url只能取#号之前的，前端需要使用history模式

### 后端需要做的事

* deploy.php
```php
add('shared_dirs', ['/public/wap']);
```
前端如果打包更新后，前端可以自己将打包后的static目录放到/project/current/public/wap下

* config/filesystems.php
重新定义一个disk
```php
  'disks' => [
  		....
        'wap' => [
            'driver' => 'local',
            'root' => public_path('wap'),
            'url' => env('APP_URL'),
            'visibility' => 'public',
        ],
    ],
```

* 路由routes/web.php
```
Route::any('front_wap/{all}', 'Controller@front_wap')->where(['all' => '.*']);
```
https://laravel-china.org/articles/4054/when-using-laravel-to-develop-spa-routing-correct-posture

* 控制器方法
```php
    public function front_wap()
    {
        $files = \Storage::disk('wap')->allFiles();

$manifest_js = '';
        $vendor_js = '';
        $app_js = '';
        $app_css = '';
        foreach ($files as $file) {
            if (starts_with($file, ['static/css/app']) && ends_with($file, ['css'])) {
                $app_css = $file;
            }

if (starts_with($file, ['static/js/manifest']) && ends_with($file, ['js'])) {
                $manifest_js = $file;
            }

if (starts_with($file, ['static/js/vendor']) && ends_with($file, ['js'])) {
                $vendor_js = $file;
            }

if (starts_with($file, ['static/js/app']) && ends_with($file, ['js'])) {
                $app_js = $file;
            }
        }

return view('home')->with([
            'app_css' => $app_css,
            'manifest_js' => $manifest_js,
            'vendor_js' => $vendor_js,
            'app_js' => $app_js,
        ]);
    }
```
* 模板文件（拿到前端打包后的index.html文件加以改动）
```php
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>{{config('app.name')}}</title>
    <script src=http://res.wx.qq.com/open/js/jweixin-1.4.0.js></script>
    <link href={{asset('wap').'/'.$app_css}} rel=stylesheet>
</head>
<body>
<div id="app"></div>
<script type=text/javascript src='{{asset('wap').'/'.$manifest_js}}'></script>
<script type=text/javascript src='{{asset('wap').'/'.$vendor_js}}'></script>
<script type=text/javascript src='{{asset('wap').'/'.$app_js}}'></script>
</body>
</html>
```

### 前端需要做的事
```
 base: '/front_wap', #需要配合后端路由
 mode: 'history',
 ```
 ```
    build: {
	.........
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

// Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '../../wap/',//静态资源引入设置，与静态资源位置相对应
	}
	
	```
https://www.jb51.net/article/142831.htm

获取jssdk时：注意前端传到后端的url不要进行encodeURIComponent处理。分享到qq时会有意外收获
		
### 访问方式及其效果（不带#号了）
![](https://cos.cc430.cn/2018/10/30/1540870767.png)

laravel+deploy+前端vue打包文件部署（vue分享，去除#号）

添加新评论

最新文章

最新回复

标签

归档

友情链接