javascript - vue2.0修改分隔符失败

问题描述

问 题

vue分隔符与golang有冲突，想修改掉，看vue2.0的文档
delimiters: ['${', '}']，不过需要在独立构建模式，

2.0文档:

//独立构建
resolve: {
  alias: {
    'vue$': 'vue/dist/vue.common.js'
  }
}

//修改分割符，只能在独立构建中使用
new Vue({
  delimiters: ['${', '}']
})

所以我修改了配置文件，如下：

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      //'vue$': 'vue/dist/vue.esm.js',
      'vue$': 'vue/dist/vue.common.js',
      '@': resolve('src')
    }
  }

然后在main.js入口文件中修改分割符

new Vue({
  delimiters: ['${', '}'],
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

设置msg的值

export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}

但是在输出的时候，发现直接输出了${ msg }，并没有达到预期效果。

请问，我是理解错了，还是哪块配置问题？

解决方案

是我理解错误，只在独立构建有效，运行时是不行的，像下面这样可以。

new Vue({
  delimiters: ['${', '}'],
  el: '#app',
  router,
  data:{
     msg:'test'
  },
  template: '<div>${msg}</div>',
  components: { App }
})

这篇关于javascript - vue2.0修改分隔符失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！