Initially, I created a vuejs project as a test container using vue-cli.
Next, I developed an npm package named "vue-npm-example" from a Vuejs component in my local environment and then imported it into the aforementioned testing project.
Within the package,
I executed npm link and in the project I ran npm link vue-npm-example,
Example.vue
<template>
<div id="vue-npm-example">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'vue-npm-example',
data() {
return {
msg: "Welcome to Your Vue.js App"
}
},
mounted() {
console.log('this is in compoennt file')
}
};
</script>
<style lang="scss">
</style>
main.js
import Example from './components/Example.vue'
export function install(Vue, options) {
options = {
installComponents: true
}
if (options.installComponents) {
Vue.component('vuejs-example', Example)
}
}
export default Example
webpack.config.js
let path = require('path')
let webpack = require('webpack')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'index.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js',
'@': resolve('src')
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map',
node: {
fs: 'empty'
},
watch: true
}
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"'
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
Subsequently, in the testing project I performed
import Vue from 'vue'
import Example from 'vue-npm-example'
Vue.component('example', Example)
and utilized it as follows
<example></example>
An error was encountered:
[Vue warn]: Failed to mount component: template or render function not defined.
In order to resolve this issue, I set the vue alias in the webpack configuration files for both the package and project. The package was successfully integrated since when logging with console.log() in the package's main.js, it displayed within the testing project. However, despite numerous attempts, the component in the package continued to malfunction in the testing project.
Any recommendations?