Vue的自定义元素未能在DIST
建立独立的JS文件我也跟着来注册和使用这里自定义元素的方向:Vue的自定义元素未能在DIST
https://alligator.io/vuejs/custom-elements/
我使用Vue的标准的WebPack模板。
当我运行
npm run build
我希望得到所谓的dist目录element.js打包的Web组件文件。虽然没有任何反应。有谁知道是否有任何额外的步骤需要?文件没有说清楚。
这产生在我的项目下列文件:
<template>
<div id="app">
<example myProp="I can pass props!"></example>
</div>
</template>
<script>
import Example from './components/example.Vue'
export default {
name: 'app',
components: {
Example
}
}
</script>
<style>
</style>
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import vueCustomElement from 'vue-custom-element'
Vue.config.productionTip = false
Vue.use(vueCustomElement);
/* eslint-disable no-new */
import Example from './components/Example.vue';
// Configure Vue to ignore the element name when defined outside of Vue.
Vue.config.ignoredElements = [
'example-component'
];
// Enable the plugin
Vue.use(vueCustomElement);
// Register your component
Vue.customElement('example-component', Example, {
// Additional Options: https://github.com/karol-f/vue-custom-element#options
});
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
组件/ example.vue
<template>
<p>Dynamic prop value: {{myProp}}</p>
</template>
<script>
export default {
props: ['myProp']
}
</script>
的package.json
{
"name": "example",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": {
"vue": "^2.5.2",
"vue-custom-element": "^2.0.0"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
包括自定义元素和VUE库脚本文件后,我的index.html是这样的:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>example</title>
<script src="vue/dist/vue.min.js"></script>
<script src="vue-custom-element/dist/vue-custom-element.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
的文档和alligator.io文章没有解释,但为了工作,vue-custom-element仍然需要Vue.js和vue-custom-element
库。
所以你必须使用<script>
包括那个webpack生成的index.html
。
发现了一个教程,提到: http://vuetips.com/vue-web-components
实现需要Vue.js核心文件和 VUE定制元素库包含在您的网页。
它还提到https://github.com/kartsims/vue-customelement-bundler这是建立一切成一个单一的.js
文件的模板。
我不确定我是否正确理解了你,但我试图按照你的意见,并在脚本标记中将库路径添加到index.html中。它仍然不起作用。我用我目前的index.html更新了我的问题。请看一下。 –
@DavidJ。我的意思是由'/ dist/index.html'中的webpack创建的路径,您可以看到'
对不起,但我不明白。我将生成的应用程序,供应商和清单脚本文件从'/ dist'中的index.html复制到项目文件夹中的'index.html'中(这是我从您的回复中理解的),但是这并没有做到任何时候运行构建。你能否告诉我需要编辑哪个文件以及需要插入什么? –
你能更具体一点吗? 1)你的意思是“什么都没有发生”?你希望发生什么,发生了什么?控制台没有做什么? '/ dist'中没有创建? 2)你在构建过程结束时期望得到什么?现在你已经设置了它的方式,它不会成为一个捆绑在一个页面中的组件 - 它将是一个绑定的Vue应用程序,它包括一个自定义元素,但不使用它。 vue-cli webpack模板旨在编写应用程序,而不是单个组件。 –
@LinusBorg我希望'npm run build'能够输出'/ dist'中的'example.js',除了它通常的功能之外。在alligator.io上的文档明确指出,鉴于我在我的问题中包含的文件,“......在构建到独立脚本之后,您应该能够将该脚本添加到任何网页,并使其呈现示例组件预期。”我不是说webpack构建根本不起作用。 –
那么,webpack不知道你想要一个单独的'example.js'文件。 webpack配置说它应该将'main.js'编译成'/ dist/app.js',没有别的。当我说webpack模板设置为构建应用程序而不是独立组件时,这就是我的意思。我会尽量写出一个小答案,但是如果你想这样做还有很多需要改变的地方,不知道我是否成功了 –