lizhenqiu blog

{
    title: '头像',
    key: 'avatar',
    columns: {
        'width':'50px'
    },
    render: (h, params) => {
        return h('div', [
            h('img', {
                attrs: {
                    src: params.row.avatar
                },
                style: {
                    width: '40px',
                    height: '40px'
                }
            }),
        ]);
    }
},

在使用webpack2.x打包时，出现下面报错（Unexpected token name «i», expected punc «;»）：

ERROR in app.js from UglifyJs
Unexpected token name «i», expected punc «;» [app.js:9461,13]
定位到的报错是：

function oneOf (value, validList) {
    for (let i = 0; i < validList.length; i++) {//此行报错
        if (value === validList[i]) {
            return true;
        }
    }
    return false;
}
看样子是UglifyJs压缩插件在遇到es6语法时出错了。但是项目中自己写的代码是有用babel编译的，上面报错的代码应该是来自vue的库。为什么这些代码没有经过babel编译后才执行UglifyJs压缩呢？

{
  "private": true,
  "scripts": {
    "serve": "php artisan serve",
    "apidoc": "apidoc -i app/Http/Controllers/Api/v2 -o public/docs",
    "ide-helper": "php artisan ide-helper:generate",
    "git-push": "git add -A && git commit -m 'no msg' && git push --progress 'origin' master:master",
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "fix-memory-limit": "cross-env LIMIT=8096 increase-memory-limit"
  },
  "devDependencies": {
    "axios": "^0.15.3",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^3.2.4",
    "css-loader": "^0.26.4",
    "element-ui": "^1.3.7",
    "fastclick": "^1.0.6",
    "increase-memory-limit": "^1.0.6",
    "jquery": "^3.2.1",
    "laravel-mix": "^0.12.1",
    "lodash": "^4.17.4",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "vue": "^2.4.2",
    "vue-loader": "^11.3.4",
    "vue-router": "^2.7.0",
    "vue-style-loader": "^2.0.5",
    "vue-template-compiler": "^2.4.2"
  },
  "dependencies": {
    "chart.js": "^2.6.0",
    "iview": "^2.0.0",
    "vant": "^0.12.3",
    "vue-chartjs": "^2.7.2",
    "vue-github-badge": "^1.0.1",
    "vue-html5-editor": "^1.1.1",
    "vue-image-crop-upload": "^2.1.3",
    "vue-quill-editor": "^2.2.6",
    "vue-social-share": "^0.0.3",
    "vuex": "^3.0.1"
  }
}

var mix = require('laravel-mix');
var production=0;
//282216
//284050
// npm run watch
// npm run production
if(production)	Mix.babelConfig={
        babelrc: false,
        presets: [
            ['es2015'],
        ],
    };
//复制图片资源
//mix.copy('resources/assets/images',             'public/images');

//生成vue页面js
mix
	//.js('resources/assets/js/app.js',            'public/js/app.js')
    .js('resources/assets/js/admin/main.js',    'public/js/admin.js')
    //.js('resources/assets/js/api/main.js',      'public/js/api.js')
    //.js('resources/assets/js/business/main.js', 'public/js/business.js')
    .js('resources/assets/js/city/main.js', 'public/js/city.js');

//生成bootstrap样式文件
//mix.sass('resources/assets/sass/app.scss',      'public/css');

//配置webpack
mix.webpackConfig({
    output: {
        // 路由懒加载文件路径
        chunkFilename: "js/build/[id].js?[hash:8]"
    },
    module: {
        rules: [{
            // 图片资源保存路径规则
            test: /\.(png|jpe?g|gif)$/,
            loaders: [
                {
                    loader: 'file-loader',
                    options: {
                        name: path => {
                            // 自定义部分
                            try {
                                if (/\/resources\/assets\//.test(path)) {
                                    var file = path.substring(path.indexOf('/resources/assets/') + '/resources/assets/'.length);
                                    if (file) {
                                        if (file.substring(0, 3) === 'js/') file = 'pages/' + file.substring(3);
                                        if (file.substring(0, 7) === 'images/') file = file.substring(7);
                                        return 'images/' + file + '?[hash:8]'
                                    }
                                }
                            } catch (e) { }
                            // 系统定义部分
                            if (!/node_modules|bower_components/.test(path)) {
                                return 'images/[name].[ext]?[hash:8]';
                            }
                            return 'images/vendor/' + path
                                .replace(/\\/g, '/')
                                .replace(
                                    /((.*(node_modules|bower_components))|images|image|img|assets)\//g, ''
                                ) + '?[hash:8]';
                        },
                        publicPath: mix.config.options.resourceRoot
                    }
                }
            ]
        }, {
            // 字体资源保存路径规则
            test: /\.(woff2?|ttf|eot|svg|otf)$/,
            loader: 'file-loader',
            options: {
                name: path => {
                    // 自定义部分
                    try {
                        if (/\/resources\/assets\//.test(path)) {
                            var file = path.substring(path.indexOf('/resources/assets/') + '/resources/assets/'.length);
                            if (file) {
                                if (file.substring(0, 3) === 'js/') file = 'pages/' + file.substring(3);
                                if (file.substring(0, 7) === 'fonts/') file = file.substring(7);
                                return 'fonts/' + file + '?[hash:8]'
                            }
                        }
                    } catch (e) { }
                    // 系统定义部分
                    if (!/node_modules|bower_components/.test(path)) {
                        return 'fonts/[name].[ext]?[hash:8]';
                    }
                    return 'fonts/vendor/' + path
                        .replace(/\\/g, '/')
                        .replace(
                            /((.*(node_modules|bower_components))|fonts|font|assets)\//g, ''
                        ) + '?[hash:8]';
                },
                publicPath: mix.config.options.resourceRoot
            }
        }]
    }
});

upstream websocket { 
    server ip:端口;  //转发
}
server {
        listen 443;
        server_name 域名;
        ssl on;
        ssl_certificate   证书;
        ssl_certificate_key 证书;
        ssl_session_timeout 5m;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;
        
        location /wss {
             access_log /usr/share/nginx/logs/https-websocket.log;
             proxy_pass http://websocket/; # 代理到上面
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header Host $host;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_http_version 1.1;
             proxy_set_header Upgrade $http_upgrade;
             proxy_set_header Connection "upgrade";
             rewrite /wss/(.*) /$1 break;
             proxy_redirect off;
        } 
}

<?php

namespace App\Console\Commands;

use Workerman\Worker;
use Illuminate\Console\Command;

class WorkermanCommand extends Command
{
    private $server;
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    //protected $signature = 'wk {action}';
    protected $signature = 'workman {action} {--d}';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Start a Workerman server.';

    /**
     * Create a new command instance.
     *
     * @return void
     */
    public function __construct()
    {
        parent::__construct();
    }

    /**
     * Execute the console command.
     *
     * @return mixed
     */
    public function handle()
    {
        global $argv;
        $action = $this->argument('action');
        $argv[0] = 'wk';
        $argv[1] = $action;
        $argv[2] = $this->option('d') ? '-d' : '';
		// php artisan workman start --d
        switch ($action) {
            case 'start':
                $this->start();
                break;
            case 'stop':
                break;
            case 'restart':
                break;
            case 'reload':
                break;
            case 'status':
                break;
            case 'connections':
                break;
        }
    }

    private function start()
    {
		// 证书最好是申请的证书
		$context = array(
			// 更多ssl选项请参考手册 http://php.net/manual/zh/context.ssl.php
			'ssl' => array(
				// 请使用绝对路径
				'local_cert'                 => '/www/wdlinux/nginx/conf/cert/a.******.net-ca-bundle.crt', // 也可以是crt文件
				'local_pk'                   => '/www/wdlinux/nginx/conf/cert/a.******.net.key',
				'verify_peer'                => false,
				//'verify_peer_name' => false,
				//'allow_self_signed' => true, //如果是自签名证书需要开启此选项
			)
		);
		// 这里设置的是websocket协议（端口任意，但是需要保证没被其它程序占用）
		$worker = new Worker("websocket://0.0.0.0:20002",$context);
		
		// 设置transport开启ssl，websocket+ssl即wss
		//$this->server->transport = 'ssl';

        // 启动4个进程对外提供服务
        $worker->count = 1;
		$worker->uidConnections = array();
		
        $handler = \App::make('App\Handlers\WorkermanHandler');
        // 连接时回调
		
			/*$worker->onWorkerStart = function($worker){
				global $handler;
				// 开启一个内部端口，方便内部系统推送数据，Text协议格式 文本+换行符
				$inner_text_worker = new Worker('Text://0.0.0.0:5678');
				$inner_text_worker->onMessage = [$handler, 'onMessage'];
				$inner_text_worker->listen();
			};*/
		

        $worker->onConnect = [$handler, 'onConnect'];
        // 收到客户端信息时回调
        $worker->onMessage = [$handler, 'onMessage'];
        // 进程启动后的回调
        $worker->onWorkerStart = [$handler, 'onWorkerStart'];
        // 断开时触发的回调
        $worker->onClose = [$handler, 'onClose'];
        // 运行worker
        Worker::runAll();
    }
}

1）调试模式和日志的配置都在 config/app.php 配置文件中

 

2）打开调试模式

'debug' => env('APP_DEBUG', true)
 

3）laravel的日志默认已经打开了（不可以关），我们可以修改一下日志的记录方式（默认 single 单文件记录）

'log' => env('APP_LOG', 'daily')
PS：日志的记录方式有 single, daily, syslog, errorlog

 

4）设置报错级别（避免生成过多日志）

'log_level' => env('APP_LOG_LEVEL', 'error')
PS：config/app.php 文件里默认是没这个配置项的，要自己加，可以使用的值还有 debug, info, notice, warning, error, critical, alert, emergency

<template>
  <div class="test">

  </div>
</template>

<script>
  export default {
    name : 'test',
    data() {
      return {
        websock: null,
      }
    },
    created() {
      this.initWebSocket();
    },
    destroyed() {
      this.websock.close() //离开路由之后断开websocket连接
    },
    methods: {
      initWebSocket(){ //初始化weosocket
        const wsuri = "ws://127.0.0.1:8080";
        this.websock = new WebSocket(wsuri);
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onopen = this.websocketonopen;
        this.websock.onerror = this.websocketonerror;
        this.websock.onclose = this.websocketclose;
      },
      websocketonopen(){ //连接建立之后执行send方法发送数据
        let actions = {"test":"12345"};
        this.websocketsend(JSON.stringify(actions));
      },
      websocketonerror(){//连接建立失败重连
        this.initWebSocket();
      },
      websocketonmessage(e){ //数据接收
        const redata = JSON.parse(e.data);
      },
      websocketsend(Data){//数据发送
        this.websock.send(Data);
      },
      websocketclose(e){  //关闭
        console.log('断开连接',e);
      },
    },
  }
</script>
<style lang='less'>
 
</style>