- 61
- 0
用vue打包了一个vue组件库
结果import该组件库的时候,只是空的/undefined
使用文件index.js
import Vue from 'vue'
import { registerStory } from './index'
import components from '../lib/index.min'
console.log(components, require('../lib/index.min'))
// 输出结果为 undefined , Module {__esModule: true, Symbol(Symbol.toStringTag): "Module"}
引入的结果是空的
main.js 入口文件
import tempButton from './components/temp-button'
import helloBeehive from './components/hello-beehive'
export default {
version: '1.0.0',
helloBeehive,
tempButton
}
webpack.config
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const styleLoader = require('./style-loader')
const path = require('path')
const pkg = require('../package.json')
const lowercamelcase = str => str.replace(/-(\w)/g, (m, l) => l.toUpperCase())
const resolve = _path => path.join(__dirname, '../', _path)
module.exports = {
mode: 'production',
entry: resolve('./src/main.js'),
output: {
path: resolve('./lib'),
filename: 'index.min.js',
chunkFilename: '[id].js',
library: lowercamelcase(pkg.name),
libraryTarget: 'umd',
libraryExport: 'default',
globalObject: "typeof self !== 'undefined' ? self : this"
},
externals: {
vue: {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue',
amd: 'vue'
}
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src')
}
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'img/[name].[hash:8].[ext]'
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)?$/,
loader: 'url-loader',
options: {
limit: 8192,
name: 'media/[name].[hash:8].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name].[hash:8].[ext]'
}
},
...styleLoader
]
},
plugins: [new CleanWebpackPlugin(), new VueLoaderPlugin()]
}
2
打赏
收藏
点击回答
您的回答被采纳后将获得:提问者悬赏的 10 元积分
- 共 0 条
- 全部回答
-
ゅ文明人 普通会员 1楼
在Webpack中,你可能遇到的情况是在打包vue组件时,import语句导入的值为空。这可能是因为你在编译组件时没有正确处理导入的值。
以下是一些可能的原因和解决方案:
- 编译顺序问题:如果你在使用
import语句导入组件时,使用了await关键字,那么你的import语句会被异步执行。这可能会导致import语句导入的值为空。
解决方法:确保你的
import语句的顺序正确。通常,应该按照import语句的顺序,从<script>标签开始,到<style>标签结束。在import语句中,await关键字应该放在import语句后面。- 模块未导入:如果你的组件在模块导入后才被编译,那么
import语句可能会导入的值为空。
解决方法:确保你的组件在模块导入后被编译。你可以在
webpack的配置文件中,设置module属性为commonjs或esnext模式,然后在模块中使用import语句导入组件。- 缓存问题:如果你使用了浏览器的缓存,那么
import语句可能会导致导入的值为空。
解决方法:如果你使用了浏览器的缓存,那么你可以清除缓存。在浏览器中,你可以按
Ctrl+Shift+Delete键,然后在搜索框中输入Cache,然后按Enter键。这将打开一个新的页面,你可以在这个页面中清除缓存。- 错误的模块路径:如果你的模块路径错误,那么
import语句可能会导入的值为空。
解决方法:检查你的模块路径是否正确。在打包文件时,你需要确保你的模块路径正确。你可以在
webpack的配置文件中,设置output属性为module,然后在模块中使用import语句导入组件。 - 编译顺序问题:如果你在使用
更多回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部

