分类： 研究

vue 引进quill-image-resize-module 报错TypeError: Cannot read property ‘imports’ of undefined

首先说解决方案，不止一个，这里发我觉得比较好的一种。

在webpack中添加ProvidePlugin，有两种情况。

webpack.base.conf.js

如果是vuecli2，则会有./build/webpack.base.conf.js这样的文件，添加方式：

如果没有引入webpack则需要：

const webpack = require('webpack')

找到config下的plugins，添加如下代码：

plugins: [
   new webpack.ProvidePlugin({
       'window.Quill': 'quill/dist/quill.js',
       'Quill': 'quill/dist/quill.js'
 })
]

vue.config.js

对于vuecli3，则直接在vue.config.js中找到chainWebpack，添加

chainWebpack: config => {
    // quill-image-resize-module插件报错imports
    config.plugin('provide').use(webpack.ProvidePlugin, [{
      'window.Quill': 'quill/dist/quill.js',
      Quill: 'quill/dist/quill.js'
    }])
}

回过来说一下quill的两种引入方式，一种是直接使用quill，一种是使用vue-quill-editor。

quill

<template>
  <div ref="editor"></div>
</template>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import Quill from 'quill'
import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)
    data() {
    return {
      quill: undefined,
      currentValue: '',
      options: {
        theme: 'snow',
        bounds: document.body,
        debug: 'warn',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            // [{ 'script': 'sub' }, { 'script': 'super' }],
            [{ indent: '-1' }, { indent: '+1' }],
            // [{ 'direction': 'rtl' }],
            // [{ size: ['small', false, 'large', 'huge'] }],
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            [{ color: [] }, { background: [] }],
            // [{ 'font': [] }],
            [{ align: [] }],
            ['clean'],
            ['link', 'image']
          ],
          imageDrop: true,
          imageResize: {}  //注意这里的首字母小写，组件官方文档是大写开头，会报错quill Cannot import ImageResize. Are you sure it was registered?
        },
        placeholder: '书写你的内容',
        readOnly: false
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const editor = this.$refs.editor
      // 初始化编辑器
      this.quill = new window.Quill(editor, this.options)
      // 默认值
      this.quill.pasteHTML(this.currentValue)
      // 绑定事件
      this.quill.on('text-change', (delta, oldDelta, source) => {
        const html = this.$refs.editor.children[0].innerHTML
        const text = this.quill.getText()
        const quillSelf = this.quill
        // 更新内部的值
        this.currentValue = html
        // 发出事件 v-model
        this.$emit('input', html)
        // 发出事件
        this.$emit('change', { html, text, quillSelf })
      })
      // 将一些 quill 自带的事件传递出去
      this.quill.on('text-change', (delta, oldDelta, source) => {
        this.$emit('text-change', delta, oldDelta, source)
      })
      this.quill.on('selection-change', (range, oldRange, source) => {
        this.$emit('selection-change', range, oldRange, source)
      })
      this.quill.on('editor-change', (eventName, ...args) => {
        this.$emit('editor-change', eventName, ...args)
      })
    }
  }

vue-quill-editor

<template>
  <div class="hello">
     <quill-editor v-model="content"
                      :options="editorOption"
                      @blur="onEditorBlur($event)"
                      @focus="onEditorFocus($event)"
                      @ready="onEditorReady($event)">
        </quill-editor>
    </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import Quill from 'quill'
import { quillEditor } from 'vue-quill-editor'
import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)

//自定义字体类型
var fonts = [
  "SimSun",
  "SimHei",
  "Microsoft-YaHei",
  "KaiTi",
  "FangSong",
  "Arial",
  "Times-New-Roman",
  "sans-serif"
];
var Font = Quill.import("formats/font");
Font.whitelist = fonts; //将字体加入到白名单
Quill.register(Font, true);

export default {
  name: 'HelloWorld',
  components: {
    quillEditor
  },
  data () {
    return {
      contentCode:'',
      content: `<p><img src="http://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1581398243&t=ccf50d7b4dd50dac437d46e368b66b20" width="500"></p>
         `,
     editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike', 'image'],
            ['formula', 'clean'],
            ['blockquote', 'code-block'],
            [{'list': 'ordered'}, {'list': 'bullet'}],
            [{'script': 'sub'}, {'script': 'super'}],
            [{'size': ['small', false, 'large', 'huge']}],
            [{ 'font': fonts }],
            [{'header': [1, 2, 3, 4, 5, 6, false]}],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'align': [] }],
            [{'direction': 'rtl'}]
          ],
          history: {
              delay: 1000,
              maxStack: 50,
              userOnly: false
            },
            imageDrop: true,
            imageResize: {
              displayStyles: {
                backgroundColor: 'black',
                border: 'none',
                color: 'white'
              },
              modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
            }
        },
        placeholder: '输入内容........'
      }
    }
  },
  methods: {
    //vue-quill-editor
    onEditorBlur(quill) {
      // console.log("editor blur!", quill, this.content);
      //this.$emit("editorBlur", this.content);
      this.contentCode=this.content
    },
    onEditorFocus(quill) {
      this.contentCode=this.content
    },
    onEditorReady(quill) {
      // console.log("editor ready!", quill);
    },
    onEditorChange({ quill, html, text }) {
      // console.log("editor change!", quill, html, text);
      this.content = html;
    },
    onEditorChange(quill) {
      // console.log("编辑内容改变!", quill, this.content);
      //this.$emit("editorBlur", this.content);
    },
  },
  mounted() {
    //  console.log("this is current quill instance object", this.editor);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
</style>

增值税发票开票软件（ukey版）管理员密码留空即可登录

增值税发票开票软件（ukey版）管理员密码留空

新开通的ukey，软件据说也是新版的，对照文档发现确实够新，文档跟软件都不太一样，装好开票软件之后，启动，插上Ukey，能识别，输入初始密码88888888，修改初始密码，然后，就是图片上的界面，出来一个管理员用户，还要输入密码，实在不清楚这个管理员是在哪里设置过，于是用ukey密码尝试，密码错误，用初始密码8个8尝试，密码错误，也没有密码找回之类的选项。

只好拨打12366电话，只有机器人，解决不了问题，甚至连问题都没听懂。

拨打石景山税务局的电话，电话链路有问题，杂音特别多，说明来意，说电话改了，拨打另外一个，然后打通了说需要去办税大厅，那就去吧。

去了之后扫二维码预约，扫二维码取号，倒是不用等。

说明情况之后，姑娘核验了身份证，把ukey交给旁边同事把密码初始化，我插到电脑上再试，还是密码错误，姑娘翻了半天笔记本，说你试试空密码，我把密码清除，点击登录，成功了。这就是经过。一个上午就这么过去了。

在docker中的jenkins中调用composer

假定部署环境使用的是futuremeng/dnmp(fork自yeszao/dnmp)，我在其中增加了一个jenkins，那么当jenkins部署php项目时，除了拉取代码，我还会在shell中修改env为当前实例所需的配置，然后接下来，就是执行composer来构建项目需要的包。之前，我是在jenkins容器中又不得已安装了一个php和composer，这显然是和dnmp下面的php重复了，完全没有必要。

所以接下来，我查到了在docker-compose.yml的jenkins配置中：

  jenkins:
    image: jenkins/jenkins:${JENKINS_VERSION}
    container_name: jenkins
    volumes:
        - ${JENKINS_HOME_DIR}:/var/jenkins_home
        - ${JENKINS_CERTS_DIR}:/certs/client
        - ${SOURCE_DIR}:/www/:rw
        - ${TOMCAT_WEBAPPS_DIR}:/webapps/:rw
        - /var/run/docker.sock:/var/run/docker.sock
        - /usr/bin/docker:/usr/bin/docker
        - /usr/lib/x86_64-linux-gnu/libltdl.so.7:/usr/lib/x86_64-linux-gnu/libltdl.so.7
    ports:
        - "${JENKINS_HTTP_PORT}:8080"
    expose:
        - "8080"
        - "50000"
    privileged: true
    user: root
    restart: always
    environment:
        TZ: "$TZ"
        JAVA_OPTS: '-Djava.util.logging.config.file=/var/jenkins_home/log.properties'
        JENKINS_OPTS: '--prefix=/jenkins'
    networks:
      - default

设置了

- /var/run/docker.sock:/var/run/docker.sock

这一项，其实本来就是为了让容器也能直接调用宿主机的docker命令，我试了一下docker ps -a，真的没问题，那么我就把本来用在宿主机的命令拿过来，比如bash.alias.sample文件中的：

# php composer
composer () {
    tty=
    tty -s && tty=--tty
    docker run \
        $tty \
        --interactive \
        --rm \
        --user www-data:www-data \
        --volume ~/dnmp/data/composer:/tmp/composer \
        --volume $(pwd):/app \
        --workdir /app \
        dnmp_php composer "$@"
}

将其中的命令改为：

    tty=
    tty -s && tty=--tty
    docker run \
        $tty \
        --interactive \
        --rm \
        --user www-data:www-data \
        --volume /dnmp/data/composer:/tmp/composer \
        --volume /dnmp/www:/app \
        --workdir /app \
        dnmp_php composer install

其中，我把$(pwd)改为了laravel项目所在的地址，这个地址是宿主机的地址，因为这里的docker命令是宿主机的。另外，/dnmp/data/composer也是对应宿主机中的composer缓存文件夹地址。”$@”则直接写上了install

jenkins中通过Global Tool安装nodejs须要注意npm版本可能过低

初始化jenkins之后，通过Global Tool安装nodejs的某个版本，过高了项目不匹配，跑不通，比如我选择了一个node14.22.0，但依然构建不成功，报错：

npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it!

以及：

-  Building for production...
 ERROR  Error: Cannot find module 'html-webpack-plugin'

后来查到尽管用的是nodejs14，但其中的npm版本低了，用npm -v看了一下是6，其中从第一个报错就应该意识到要升级npm了，所以在shell中加上了：

npm install -g npm

VSCode Remote-SSH使用密码远程的服务器如何保存密码免密登录

IDE：vscode

插件：remote-ssh

场景：远程服务器拿了IP，用户名和密码

则默认情况下config文件（在远程资源管理器插件中点击修改设置，选择对应的配置文件）中保存为：

Host 192.168.0.7
  HostName 192.168.0.7
  User root

每次连接时，都需要用户输入密码，而且重连时也需要输入密码。改善的方式是将登录方式改为密钥的方式。

在本地电脑上用ssh-keygen生成密钥对，并将公钥放到服务器上去。

实现的具体步骤：

本地生成密钥对：

ssh-keygen -t rsa -f id_rsa_server_someone

然后将生成的id_rsa_server_someone.pub拷贝到服务器上的/root/.ssh下，并

cat id_rsa_server_someone.pub >> authorized_keys

最后，config中修改为：

Host 192.168.0.7
  HostName 192.168.0.7
  IdentityFile ~/.ssh/id_rsa_server_someone
  PreferredAuthentications publickey
  User root

替换vant加载的外部资源来避免nginx策略屏蔽

某项目因前置nginx限制较多，不允许站内调用外部资源，所以因vant引用了cdn的图标，以及通过data方式加载图标资源，需要对vant进行修改，但又不想去自己弄个vant的修改版，所以从build之后的文件入手。

先创建一个localFilterPlugin.js，放在src/libs内，或者其他文件夹，比如utils，看你的习惯。内容如下：

/*
 * @Date: 2021-11-26 15:43:28
 * @LastEditors: Future Meng
 * @LastEditTime: 2021-11-26 18:19:11
 */
// 用于向控制台输出带颜色的问题提示
const fs = require('fs') // node的文件系统模块，用于读取操作系统文件
const path = require('path') // node提供的一些用于处理文件路径的工具
const chalk = require('chalk')

class LocalFilterPlugin {
  static defaultOptions = {
    filenameReg: /^chunk-mobile\..*\.css$/,
    originContent: /@font-face[^}]+}/g,
    newContent: '',
    assetsPath: '../../dist/css'
  };

  constructor(options = {}) {
    this.options = { ...LocalFilterPlugin.defaultOptions, ...options }
  }

  apply(compiler) {
    const _this = this
    compiler.plugin('done', function(compilation, callback) {
      const filePath = path.resolve(__dirname, _this.options.assetsPath)

      fs.readdir(filePath, (err, files) => {
        // 读取文件路径
        if (err) {
          console.log(chalk.yellow('读取文件夹异常：\n' + err.message + '\n'))
        }
        files.forEach((filename) => {
          // 找到符合正则规则的文件
          if (_this.options.filenameReg.test(filename)) {
            // 读取该文件
            const fileDir = path.resolve(filePath, filename)
            fs.readFile(fileDir, 'utf-8', (err, data) => {
              // 读取文件内容
              if (err) {
                console.log(chalk.yellow('读取文件异常：\n' + err.message + '\n'))
                return
              }

              // 替换文件内容
              const result = data.replace(_this.options.originContent, _this.options.newContent)
              fs.writeFile(fileDir, result, (err) => {
                if (err) {
                  console.log(chalk.red('写入修改后的文件异常:\n' + err.message + '\n'))
                  return
                }
                console.log(chalk.cyan(filename + '替换完成'))
              })
            })
          }
        })
      })
    })
  }
}

module.exports = LocalFilterPlugin

然后在vue.config.js中添加对这个自定义插件的引用。

const LocalFilterPlugin = require('./src.mobile/libs/localFilterPlugin')

module.exports = {
        configureWebpack: config => {
    const configNew = {}
    if (process.env.NODE_ENV === 'production') {
      configNew.externals = externals
      configNew.plugins = [
        // 构建后剔除@font-face
        new LocalFilterPlugin({
          options: {
            filenameReg: /^chunk-mobile\..*\.css$/,
            originContent: /@font-face[^}]+}/g,
            newContent: '',
            assetsPath: '../../dist/css'
          }
        })
      ]
    }
    return configNew
  },
}

就这些。

参考资料：https://blog.csdn.net/qq_31968791/article/details/102900349

sweethome3d

http://www.sweethome3d.com/

推荐一个室内设计软件，关键是开源的，与LiveHome3D相比，感觉差不多，有的使用习惯似乎还更好一些。

把两居改成四居，是这两年一直在思考的一个问题，已经做了十几个方案，最近终于逐渐找到了方向。

顺便抱怨一句，目前这些独立设计师的作品都不太看得上，不实用。

摩捷出行，突破了我对上线产品的界定标准

先说一句，哪怕只给我一百万，也不能把这个app做这么垃圾。

这是一个租了车找不到车的租车APP。

从城市定位、车辆筛选到下单、找车，几乎没有一个步骤都可以称得上是不好用或者不可用，简直无法想象是怎样的一个团队能作出这种无法理喻的产品。

（1）我的所在地是北京，目的地是成都，即时我把城市切换到成都，点一下Go就切换回北京，再切换回成都，搜索成都的地址，比如双流机场，搜不到，因为搜索的是北京的地点，这是什么样的脑回路。

（2）既然不能搜索，那就拖动地图来定位，在双流机场附近找到有车辆可租，但选中车辆后，只显示车型、车牌号和剩余里程，不显示具体位置，以至于你都不知道能否找到这辆车，而实际上，也确实找不到。

（3）当你选择的车辆不符合预期，比如不喜欢这个车型或者续航剩余太少，没有取消选择，点击其他区域，可以取消选择，但视角回到了初始界面，又要重新拖动定位到目标地点。

（4）车辆筛选只有勾选车型这一种方式，而且修改了车型勾选之后无法确认到底有没有生效，甚至选两次以后一辆车都没有了，不知道如何撤销筛选。按说我选车最基本的几个指标应该很清晰的呈现出来，比如步行距离、车型、续航、停车位类型、停车位的具体位置和现场照片、租金标准、押金标准、停车费（需要自付，客服说如果费用太高可以退掉换一辆，开玩笑吗？）、最后一次保洁时间、车内是否有自助保洁套装等。当然，显示一下这辆车的评价记录也是必要的。

（5）无论如何，用官方送的摩豆订了一辆车，反正不花钱，跟预算有关的暂时忽略，但接下来的问题真的就是怎么找到这辆车，订单提示只有一张车位照片，但问了停车场的管理员，他认为这不是自己这个停车场的车位，接下来就无从寻找了。后来找了现场的支持人员（我参加的是一汽大众在成都组织的新车首发仪式，有摩捷体验），建议是取消这个订单，由他们给找一辆能确定位置的车。取消容易，再找就要靠支持人员的脑力了，有个人突然想起有一辆电量还比较多的高配宝来，于是寻到这辆车，接下来竟然不是扫描车身上的二维码来订这辆车，而是回到app再次翻查这个车牌，甚至不能搜索这个车牌，好在很快找到了。

（6）据说后来支持人员改进了找车的流程，他们把所有车辆下线，然后现场分配车辆的时候，确认一辆，上线一辆，帮客户抢单一辆。一个字，服。

（7）提车的时候，按说应该拍照，记录一下车的外观，标准的做法是按车险一样，拍车的各标准角度照片和局部损伤照片，优化一点的话，应该主动标明目前的损伤，由用户确认即可，不用二次拍摄，毕竟停车条件有限，不一定能拍到标准角度的全方位照片。但是拍照没有引导，随意拍或者跳过都行。

（8）手机连接车辆蓝牙的时候会连不上，需要退出app重新登录。手机操作车辆的时候都要通过远程服务器，信号不好的话就完蛋了，要么无法取车，要么无法还车，没有建立手机和车辆之间端到端的授信通道。

（9）进到车里之后，有烟味，方向盘和档杆很脏，拿酒精湿巾擦了好几遍，都是黑黑的。考虑到自助租车这种形式很难做到每客保洁，但应该通过预约保洁、利用车内预存的保洁套装自助保洁等方式改善。车内应该安装烟雾探测器，车辆应该标注是否允许吸烟。

（10）还车的时候除了一般评价和外观拍照以外，也应该提供自助保洁的选择，主动整理保洁车辆的可以给优惠券或者直接抵扣一些车费，当然，可以等下一个客户接车评价后落实。

可以学习的挺多的，可为什么不学呢？

买车我选择了一汽大众的ID6 CROZZ，车是辆好车，尽管据说服务端经常无法连接，但我认为这个能够改善。