文章目录
概要
需求：开发一个问题反馈组件，要求企微连线负责人、跳转页面反馈问题...组件可以安装在Vue2、Vue3、React等项目里
整体架构流程
- 创建webpack-simple项目，编写组件，部署并发布npm包
- 创建Vue2项目，安装此依赖，利用微前端 (无界) ，嵌套Vue3项项目 (本文以Vue3为例，React不做演示！！！)
参考博客
实现效果图
技术细节
- 因为写的组件需要跳转出去打开新的页面，所以写的项目不单是发布一个npm包，还需要部署在服务器上，这就要改一下webpack.config.js的配置
- webpack-simple项目打包后图片资源不显示问题，安装 url-loader 依赖
- webpack-simple项目打包后资源找不到，修改html文件引入资源的路径 (JhLink.js是我打包后的文件的名字)
- 因为组件是Vue2的版本，所以我建了Vue2的项目，安装此依赖，利用微前端(无界)，嵌套了Vue3项目
- Vue3项目跨域解决办法（参考：微前端(无界)常见问题）
- 组件监听Vue3项目里的参数来控制组件是否隐藏
代码
组件里的webpack.config.js
var path = require('path')
var webpack = require('webpack')
const NODE_ENV = process.env.NODE_ENV
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: ["./src/main.js", './index.js'],
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/'+getUrl(),
filename: 'JhLink.js',
library: 'JhLink',
libraryTarget: 'umd',
umdNamedDefine: true
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url-loader',
options: {
esModule: false,
name: '[name].[ext]?[hash]'
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:"./index.html",//告诉模板的位置
filename:"index.html"
})
],
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
// port: 8000,
host:'192.168.43.92',
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
// 'process.env': {
// NODE_ENV: '"production"'
// }
'process.env': require('./src/config/prod')
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}else if (process.env.NODE_ENV === 'development') {
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': require('./src/config/dev')
}),
])
}else if (process.env.NODE_ENV === 'test') {
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': require('./src/config/test')
}),
])
}
function getUrl() {
let info = {}
if (NODE_ENV === 'production') {
info = require('./src/config/prod')
}else if (process.env.NODE_ENV === 'development') {
info = require('./src/config/dev')
}else if (process.env.NODE_ENV === 'test') {
info = require('./src/config/test')
}
return info.VUE_APP_URL.substring(1, info.VUE_APP_URL.length - 1);
}
小结
一开始想优雅开发 vue2/3 通用组件的，查看了关于 vue-demi-component-template 这个库，但是吧，这个只能写一些简单的js，一些复杂需要引入组件的，尤其组件还分Vue2和Vue3版本的，感觉就不合适了，然后就看了微前端！！！
标签：vue,process,loader,webpack,Vue2,Vue3,组件,js From： https://blog.csdn.net/qq_44828539/article/details/142982972