Vue的自定义元素未能在DIST

Z时代
2024-01-10
分类：问答

建立独立的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>