I'm trying to configure vue.js webpack for development mode. I have a separate folder in root directory named "styles" where I keep all my scss and include main.scss to main.js. I want to have the separate css file in the dist folder.
There is my vue.config.js:
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'development') {
return {
plugins: [new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename:'[name].css'
})],
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
}
}
}
}
Screen Result
```
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
configureWebpack: {
plugins: [
Components({
resolvers: [ElementPlusResolver()]
})
]
},
============================================================================
How to change the above plugin to the following way?
configureWebpack: (config) => {
//How to do it here
}
With this simple vue page:
<template>
<div class="home">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from '#/components/HelloWorld.vue'
import { ipcRenderer } from 'electron'
export default {
name: 'Home',
components: {
HelloWorld
},
data() {
return {
dato: null
}
},
methods: {
rendererFunct () {
//ipcRenderer.on('setting', (event, arg) => {
//console.log(arg);
//})
}
}
}
</script>
The only presence of import { ipcRenderer } from 'electron' produces the error __dirname is not defined :
Is this problem is something related to webpack configuration or it is due to something else?
This is my webpack.config.js :
import 'script-loader!./script.js';
import webpack from 'webpack';
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
target: ['electron-renderer', 'electron-main', 'electron-preload'],
pluginOptions: {
electronBuilder: {
chainWebpackMainProcess: config => {
config.resolve.alias.set('jsbi', path.join(__dirname, 'node_modules/jsbi/dist/jsbi-cjs.js'));
}
},
},
};
module.exports = {
entry: './src/background.js',
target: 'node',
output: {
path: path.join(__dirname, 'build'),
filename: 'backend.js'
}
}
module.exports = config => {
config.target = "electron-renderer";
return config;
};
module.exports = {
plugins: [
new CopyPlugin({
patterns: [
{ from: 'source', to: 'dest' },
{ from: 'other', to: 'public' },
],
options: {
concurrency: 100,
},
}),
],
};
module.exports = {
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},
],
},
};
const supportedLocales = ['en-US', 'it'];
export default const config = {
plugins: [
new webpack.ContextReplacementPlugin(
/date\-fns[\/\\]/,
new RegExp(`[/\\\\\](${supportedLocales.join('|')})[/\\\\\]index\.js$`)
)
]
}
This is vue.config.js :
module.exports = {
configureWebpack: {
// Configuration applied to all builds
},
pluginOptions: {
electronBuilder: {
chainWebpackMainProcess: (config) => {
// Chain webpack config for electron main process only
},
chainWebpackRendererProcess: (config) => {
config.plugin('define').tap((args) => {
args[0]['IS_ELECTRON'] = true
return args
})
},
mainProcessFile: 'src/background.js',
mainProcessWatch: ['src/preload.js'],
}
}
}
module.exports = {
pluginOptions: {
electronBuilder: {
disableMainProcessTypescript: false,
mainProcessTypeChecking: false
}
}
}
Electron: version 9.0.0
webpack: version 4.44.1
System:
OS: Linux 5.4 Ubuntu 18.04.4 LTS (Bionic Beaver)
CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU # 4.00GHz
Binaries:
Node: 14.5.0 - ~/.nvm/versions/node/v14.5.0/bin/node
Yarn: 1.22.4 - /usr/bin/yarn
npm: 6.14.5 - ~/.nvm/versions/node/v14.5.0/bin/npm
Browsers:
Chrome: 84.0.4147.105
Firefox: 79.0
Looking forward to your kind help.
Marco
__dirname is a NodeJS variable, in recent electron versions, node integration is disabled by default. When opening your BrowserWindow, you should add the following to the options:
webpreferences:{
nodeIntegration: true
}
This is however STRONGLY DISCOURAGED as this opens up security issues.
this seems to solve it for most people (for me sadly enough i now get the next error:
fs.existsSync is not a function)
a better solution i to change your bundler to the correct build mode. You should not be building for node but for web, so target:esnext or something.
if something requires node access, this should be solved by running it in the background thread or the preload scripts.
You can apply the solution described on this post
How to import ipcRenderer in vue.js ? __dirname is not defined
In this way you can call this method from vue files:
window.ipcRenderer.send(channel, args...)
Just make sure you configure preload.js on vue.config.js:
// vue.config.js - project root
module.exports = {
pluginOptions: {
electronBuilder: {
preload: 'src/preload.js' //make sure you have this line added
}
}
}
I have setup a new vue project and added storybook to the project. When I have components that use the #/components path, it does not run correctly.
Can't resolve '#/components/EntityGrid/EntityGrid.Component.vue'
I have tried multiple webpack.config.js without any luck. What is the simplest webpack.config.js to fix this
This is happening in the default configuration without a webpack.config.js.
I managed to resolve this issue by adding the following in .storybook/main.js
const path = require("path");
module.exports = {
stories: ['./../src/**/*.stories.(js|jsx|ts|tsx|mdx)'],
...
webpackFinal: async (config) => {
config.resolve.alias = {
...config.resolve.alias,
"#": path.resolve(__dirname, "../src/"),
};
// keep this if you're doing typescript
// config.resolve.extensions.push(".ts", ".tsx");
return config;
},
}
Here are some useful links to help provide further context:
StoryBook docs for webpackFinal - gives you the first clue as to how you might go about configuring your webpack configuration
And then this solution
on an issue in Github provided the final piece of the puzzle
I have no idea what the cause for your issue is, but here is my working vue.config.js
const path = require('path')
module.exports = {
chainWebpack: config => {
config.module
.rule("i18n")
.resourceQuery(/blockType=i18n/)
.type('javascript/auto')
.use("i18n")
.loader("#kazupon/vue-i18n-loader")
.end();
},
configureWebpack: {
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'#': path.join(__dirname, '/src')
}
},
module: {
rules: [
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
loader: 'graphql-tag/loader',
},
]
},
},
css: {
loaderOptions: {
sass: {
data: `#import "#/assets/sass/_variables.scss"; #import "#/assets/sass/_mixins.scss";`,
}
}
}
}
Just ignore all the stuff that you dont need
The question has it all, but basically, I set up a new vue app without webpack. When I try to do:
handleSubmit() {
axios
.post(`${process.env.VUE_APP_API_URL}`)
.then(response => (this.info = response));
this.$router.push({ name: "ConversationsList" });
}
It's undefined. In my .env file, I have:
VUE_APP_API_URL=http://localhost:3000
What do I have to do now?
Easy fix. Created a file called vue.config.js:
const webpack = require('webpack')
module.exports = {
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
}
})
]
}
}