Mic*_*ael 9 javascript webpack vue.js
我面临的问题是，一旦我importvue，vue（在我的情况下#app）的wrapper元素将被以下注释替换
<!--function (e,n,r,o){return sn(t,e,n,r,o,!0)}-->
控制台中没有错误，并且webpack可以正常编译，但是我确实从vue的mounted方法获取了控制台日志。
我的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>some content</h1>
{{test}}
</div>
<script src="dist/bundle.js"></script>
</body>
</html>
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
src / app.js
import Vue from 'vue'
const app = new Vue({
el: "#app",
data: {
test: "asdf"
},
mounted() {
console.log('mounted')
}
})
小智 7
您正在运行没有模板编译器的仅运行时生成。
查看https://vuejs.org/v2/guide/installation.html#Webpack
您需要为'vue'创建别名，因此webpack包含来自node_modules /的正确的vue / dist / *。js：
module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
}
另请参阅https://forum.vuejs.org/t/what-is-the-compiler-included-build/13239
虽然 Leonie 的答案是功能性的，但生产构建通常不需要包含模板编译器。我会说这可能是不受欢迎的，因为动态构建模板可能会对性能产生影响，我认为本答案就是这种情况。此外，看起来 Leonie 的答案在生产版本中包含了 Vue 的完整开发版本，由于此版本中包含所有额外内容，因此不鼓励这样做。相反，可以在构建步骤中预编译模板。
执行此操作的最简单方法是使用单文件组件 (SFC)，如上一个链接中所述：
[该] 关联的构建设置会自动为您执行预编译，因此构建的代码包含已编译的渲染函数而不是原始模板字符串。
我需要针对我自己的情况使用的另一种方法render是template为组件定义定义一个显式函数而不是 a ，因此不需要编译。我需要这个是因为我当时生成的 Vue 项目对其所有组件都使用了 SFC，除了根“安装”组件，它是使用以下对象显式定义的：
new Vue({
el: '#app',
store,
router,
components: { App },
template: '<App />'
})
这在开发模式下运行良好，但在生产中因您遇到的“功能注释”问题而失败。从 Leonie 的回答中汲取见解，我将上面的代码片段替换为以下内容：
new Vue({
el: '#app',
store,
router,
components: { App },
render: (h) => {
return h(App)
}
})
这解决了我的生产版本的问题，而无需我包含 Vue 的完整开发版本。
| 归档时间： |
|
| 查看次数： |
1690 次 |
| 最近记录： |