Vue.js与Webpack的文字、风格与模板分离
我正在用惊人的Vue和Webpack创建一个大规模的应用程序。我不想有.vue文件，因为我想将它们分离成类似comp.js、comp.pug和comp.styl之类的东西
我的comp.js是：
export default {
template: require('./comp.pug'),
data: () => {
return {
compStyle: require('./comp.styl');
message: 'Hello World!'
}
// ...
},
}我的com.pug是：
div#comp(v-bind:style="compStyle")
h1.heading {{ message }}最后，我的comp.styl将是：
.heading
color: #6E6E6E;
background-color: #E6E6E6
text-align: center乍一看，一切似乎都很好，直到我尝试使用、VueRouter、，当然还有<router-link />或<router-view />之类的元素！
因为我没有任何.vue文件，所以我认为Webpack的alias: { 'vue$': 'vue/dist/vue.common.js' }帮不了我！
我怎样才能克服这个问题？
顺便说一句，我在控制台中遇到的错误是：
Vue警告:在模板选项不可用的情况下，您使用的是仅运行时构建的Vue。要么将模板预编译成呈现函数，要么使用编译器包含的构建。
更新
值得一提的是，我有两个输入文件:一个用于整个应用程序。
import MainComp from './comp/main';
Vue.use(VueRouter);
new Vue(MainComp).$mount('#app');一个用于组件(子组件如上面所示)：
import Router from './route';
import SubComp1 from './sub1.comp'
import SubComp2 from './sub2.comp'
export default {
template: require('./main.pug'),
router: Router,
components: {
SubComp1,
SubComp2
}
}我的main.pug
div
| here goes the views
router-view这是我的route.js
export const Router = new VueRouter({
mode: 'history',
routes: [
{ path: '/three', component: SubComp3 },
{ path: '/Four', component: SubComp4 },
{ path: '/', redirect: '/' }
]
})因此，当我将alias: { 'vue$': 'vue/dist/vue.common.js' }添加到webpack时，错误将是另一回事：
Vue警告:呈现根实例时出错 未定义TypeError:无法读取未定义属性的“匹配”
回答 2
Stack Overflow用户
发布于 2016-12-13 17:50:03
component.vue (与vue-加载程序一起)：
<style src='./style.styl'></style>
<template src='./template.pug'></template>确保*.styl，*.pug的加载器存在。
更新:我忘记了，而不是这样的(没有vue-)：component.js
import './style.styl'
import tmpl from './template.pug' // may be it will work
// if import doesn't work, then do it with string variable in this file or import
const tmpl = `
h1 Hello world
`
export default {
template: tmpl,
data() {
return {}
}
}Stack Overflow用户
发布于 2016-12-13 15:41:51
Vue-loader将.vue文件编译成render functions，如果不使用它们，则需要使用包含模板编译器的standalone-build。据我所知，这是runtime和standalone构建之间的唯一区别，因此我没有理由在您的情况下使用alias作为standalone build。
顺便说一句，.vue文件可以分成多个文件。看看src导入此页上的部分，看看它是否适合您的项目需求。
https://stackoverflow.com/questions/41124718
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号