小编Ky6*_*6uk的帖子

让我们看看我们有一个简单的组件ToggleButton：

const ButtonComponent = Vue.component('ButtonComponent', {
  props: {
    value: Boolean
  },

  methods: {
    handleClick() {
      this.$emit('toggle');
    }
  },

  template: `
    <button 
      :class="value ? 'on' : 'off'"
      @click="handleClick"
    >
      Toggle
    </button>`
});

以及该组件的故事：

import ToggleButton from './ToggleButton.vue';

export default {
  title: 'ToggleButton',
  component: ToggleButton,

  argTypes: {
    onToggle: {
      action: 'toggle' // <-- instead of logging "toggle" I'd like to mutate `args.value` here
    }
  }
};

export const Default = (_args, { argTypes }) => ({
  components: { ToggleButton }, …

我的生产webpack配置是:

{
  output: {
    publicPath: "https://cdn.example.com/sub-directory/",
    filename: '[name]-[chunkhash].min.js'
  },

  devtool: 'source-map',

  plugins: [
    new webpack.optimize.UglifyJsPlugin()
  ]
}

现在我有两个文件app-12345.min.js和app-12345.min.js.map.

我也https://cdn.example.com/sub-directory/app-12345.min.js为主脚本自动生成了CDN URL .

但sourceMappingURL仍然是相对路径//# sourceMappingURL=app-12345.min.js.map,不能直接在浏览器中访问.

我的问题是我如何设置sourceMappingURL为绝对自动生成的路径？

我有一个全局验证规则，例如：

import { extend } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';

extend('required', {
  ...required,
  message: 'Please fill the field'
});

该规则适用于项目中的所有 Vue 组件。但对于一个确切的组件，我需要将消息重新定义Please fill the field为另一个组件。是否可以只更改一个 Vue 组件的消息？

我有一个 Vue 组件，其中包含一些具有复杂逻辑的外部模块。例如：

// Component.vue
import Vue from 'vue';
import { externalModule } from '@/path/to/module';

export default {
  methods: {
    useExternalModule() {
      externalModule.doSomethig();
    }
  }
};

是否可以嘲笑externalModule故事的内部？

我正在使用 Storybook v6。