当然可行！而且有两种非常规范的方式来实现你想要的模板与逻辑分离，完全不需要依赖mixin这种不太贴合场景的方案——vue-loader本身就支持这类需求：

方案一：使用<script>标签的src属性（最直观的方式） #

这是vue-loader原生支持的写法，直接把组件的逻辑脚本抽离到外部.js文件，模板留在.vue文件中即可：

MyComponent.vue

<template>
  <div class="component-container">
    <h1>{{ title }}</h1>
    <button @click="handleClick">点击我</button>
  </div>
</template>

<!-- 直接引入外部逻辑文件 -->
<script src="./MyComponent.vm.js"></script>

MyComponent.vm.js

export default {
  data() {
    return {
      title: '来自外部脚本的标题'
    }
  },
  methods: {
    handleClick() {
      console.log('按钮被点击了！')
      this.title = '标题已更新'
    }
  },
  // 其他组件选项（生命周期钩子、computed等）都可以在这里定义
}

这种写法的优势是逻辑清晰，完全符合“模板归模板，逻辑归逻辑”的分离思路，而且不需要额外的导入/导出代码，vue-loader会自动识别并处理外部脚本。

方案二：在<script>标签内导入并导出逻辑 #

如果你更习惯用ES模块的导入语法，也可以在.vue的<script>块里直接导入外部逻辑文件，然后将其作为组件选项导出：

MyComponent.vue

<template>
  <div class="component-container">
    <p>{{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
// 导入外部逻辑文件
import ViewModel from './vm.js'

// 直接导出导入的逻辑对象作为组件选项
export default ViewModel
</script>

vm.js

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

这种方式同样规范，适合已经习惯模块化导入的场景，而且你可以在.vue的<script>里做一些额外的处理（比如合并少量本地选项），不过如果只是单纯分离逻辑，方案一更简洁。

为什么不推荐用mixin？ #

你提到的mixin方案确实不适合这个场景——mixin的设计初衷是复用跨组件的通用逻辑，而不是单纯的代码分离。用mixin来做模板与逻辑分离会让组件结构变得模糊，其他开发者看到时会误以为这是在复用逻辑，反而增加理解成本。

上面两种方案都是vue-loader官方支持的标准写法，完全符合Vue的组件设计规范，放心用就好！

内容的提问来源于stack exchange，提问作者Edza