I use command in idea terminal
e.g.npm run electron:serve
My code environment:
Mac M1/macos Ventura13.0.1
node#14.21.2
npm#6.14.17
electron#12.2.3
The command stopped after Vue project compiled successful.
like this:
I try to run command rm -rf node_modules package-lock.json&&npm install
but cannot fix the situation.
Colleague's code environment:
win10
node#16.17.1
npm#8.19.2
electron#9.4.4
The normal situation in my colleague's computer:
This is my package.json
{
"name": "RetinaCare",
"version": "2.3.11",
"publishDate": "2022-03-07",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve",
"postinstall": "electron-builder install-app-deps"
},
"main": "background.js",
"dependencies": {
"axios": "^0.21.1",
"chokidar": "^3.4.2",
"core-js": "^3.6.5",
"el-table-infinite-scroll": "^1.0.10",
"electron-builder": "^23.6.0",
"electron-updater": "^4.3.9",
"element-ui": "^2.13.2",
"html2canvas": "^1.0.0-rc.7",
"iconv-lite": "^0.6.3",
"js-md5": "^0.7.3",
"jspdf-html2canvas": "^1.4.9",
"print-js": "^1.2.0",
"qiao-is-online": "0.0.6",
"vue": "^2.6.11",
"vue-html-to-paper": "^1.3.1",
"vue-image-zoomer": "1.0.4",
"vue-print-nb": "^1.5.0",
"vue-qr": "^2.4.0",
"vue-router": "^3.2.0",
"vuex": "^3.4.0",
"xml2js": "^0.4.23"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
"electron": "^12.2.3",
"electron-devtools-installer": "^3.1.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^6.2.2",
"lint-staged": "^9.5.0",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.2",
"vue-cli-plugin-electron-builder": "~2.0.0-rc.4",
"vue-template-compiler": "^2.6.11"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,jsx,vue}": [
"vue-cli-service lint",
"git add"
]
}
}
This is my vue.config.js
module.exports = {
pages: {
index: 'src/main.js',
login: 'src/login/main.js'
},
chainWebpack: config => {
config.resolve.symlinks(true)
},
devServer: {
hot: true,
hotOnly: true,
watchContentBase: false
},
configureWebpack: {
target: 'electron-renderer',
externals: ['fsevents']
},
pluginOptions: {
electronBuilder: {
extraResources: {
from: './public/dll',
to: './dll'
},
builderOptions: {
asar: false,
mac: {
target: {
target: 'default',
arch: [
'x64',
'arm64'
]
}
},
win: {
requestedExecutionLevel: 'requireAdministrator',
icon: './public/ljj_256.ico',
artifactName: '${productName}-Setup-${version}.${ext}',
target: [
{
target: 'nsis',
arch: [
'ia32'
]
}
]
},
productName: 'testProject',
nsis: {
include: './public/nsis/installer.nsh',
perMachine: false,
runAfterFinish: true,
oneClick: false,
allowElevation: true,
allowToChangeInstallationDirectory: true,
installerIcon: './public/ljj_256.ico',
uninstallerIcon: './public/ljj_256.ico',
installerHeaderIcon: './public/ljj_256.ico',
createDesktopShortcut: true,
createStartMenuShortcut: true,
shortcutName: 'electronProject',
deleteAppDataOnUninstall: true
},
publish: [
{
provider: 'generic',
url: 'https://www.electronProject_test.com/client'
}
]
}
}
}
}
This is project catalogue:
Because mac m1's framework is arm64,i changed electron version from ^9.2.0 to ^12.2.3, added electron-builder ^23.6.0 to package.json.
By the way i started sample project of vue-electron successful on the Mac.The question is so strange😭
The issue was resolved by delete yarn.lock in project. Beacuse of yarn.lock in my project, so vue-cli will look for yarn runtime environment in server. But i have not install yarn runtime environment on server. The code stop at hasProjectYarn(api.getCwd()). If you dont need yarn, Meanwhile yarn.lock file in your project ,you should delete the file!
Related
I'm trying to create a MicroFrontend in Vue2 using module federation, like Pinia provides a singleton behaviour about stores that could be awesome for use in module federation, the problem is when I inject this an error is prompt ( I make previous test in a unique application and that works )
That is the error:
And the piece of code relative is:
My configuration is the next:
Child1: Who exposed it's components contains this vue.config.js
const { defineConfig } = require('#vue/cli-service')
const {ModuleFederationPlugin} = require("webpack").container;
const deps = require("./package.json");
module.exports = defineConfig({
transpileDependencies: true,
publicPath: 'auto',
configureWebpack: {
plugins: [
new ModuleFederationPlugin({
name: 'child1',
filename: 'remoteEntry.js',
exposes: {
'./ResultsPage': './src/pages/ResultsPage',
'./Test1Page' : './src/pages/Test1Page',
'./Test2Page' : './src/pages/Test2Page',
'./appStore' : './src/store/appStore.js'
},
shared: require("./package.json").dependencies,
}),
],
}
})
And the package.json:
{
"name": "child2",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#vue/composition-api": "^1.7.0",
"core-js": "^3.8.3",
"pinia": "^2.0.17",
"vue": "^2.6.14",
"vue-router": "^4.1.5"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.8",
"#vue/cli-plugin-eslint": "~5.0.8",
"#vue/cli-plugin-router": "~5.0.8",
"#vue/cli-plugin-unit-mocha": "~5.0.8",
"#vue/cli-service": "~5.0.8",
"#vue/test-utils": "^1.1.3",
"chai": "^4.2.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"sass": "^1.32.7",
"sass-loader": "^12.0.0",
"vue-cli-plugin-pinia": "~0.1.4",
"vue-template-compiler": "^2.6.14"
}
}
Parent: This is how works vue.config.js
const { defineConfig } = require("#vue/cli-service");
const { ModuleFederationPlugin } = require("webpack").container;
const ExternalTemplateRemotesPlugin = require("external-remotes-plugin");
const deps = require("./package.json");
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
plugins: [
new ModuleFederationPlugin({
name: "microfrontends-library",
remotes: {
child1: "child1#http://localhost:3013/remoteEntry.js",
//child2: "child2#http://localhost:3014/remoteEntry.js",
},
shared: require('./package.json').dependencies,
})
],
},
});
And its package.json
{
"name": "parent",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#vue/composition-api": "^1.7.0",
"core-js": "^3.8.3",
"pinia": "^2.0.17",
"vue": "^2.6.14",
"vue-router": "^4.1.5"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-plugin-router": "~5.0.0",
"#vue/cli-plugin-unit-jest": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"#vue/test-utils": "^1.1.3",
"#vue/vue2-jest": "^27.0.0-alpha.2",
"babel-jest": "^27.0.6",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"jest": "^27.0.5",
"sass": "^1.32.7",
"sass-loader": "^12.0.0",
"vue-cli-plugin-pinia": "~0.1.4",
"vue-template-compiler": "^2.6.14"
}
}
In resume: I don't have a HTTP server because I'm making a build of the child and them using a HTTP server for support ( In the future I would like to add CDN to this children's )
All help would be accepted, really I'm in a stuck solution, so any movement to a solution would be great
// vue.config.js
module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /\.mjs$/,
include: /node_modules/,
type: "javascript/auto"
}
]
}
}
}
I find this solution in answer
Works for me
I'm trying to build an electron app from a vue-cli3 project. The vue project itself works fine both in development and production. Everything works as well if I run a dev mode with npm run electron:serve. But the built electron app would give a Uncaught TypeError: Cannot read property 'webpackJsonp' of undefined in each packed js file.
vue.config.js:
module.exports = {
configureWebpack: config => {
const tsLoader = config.module.rules.find((loader) => loader.test === /\.ts$/);
const tsLoaderIndex = config.module.rules.indexOf(tsLoader);
const webWorkerLoader = {
test: /\.worker\.ts$/,
use: [
{
loader: 'worker-loader',
options: {
filename: 'WorkerName.[hash].js',
inline: 'fallback',
}
}
]
}
config.module.rules = [...config.module.rules.slice(0, tsLoaderIndex-1), webWorkerLoader, ...config.module.rules.slice(tsLoaderIndex-1)]
// console.log(config.module.rules);
if (process.env.NODE_ENV === 'production') {
config.mode = 'production'
// pack dependencies separately
let optimization = {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 20000,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name (module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
// npm package names are URL-safe, but some servers don't like # symbols
return `npm.${packageName.replace('#', '')}`
}
}
}
}
}
Object.assign(config, {
optimization
})
}
},
parallel: false,
chainWebpack: config => {
config.output.globalObject('this')
},
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: []
}
},
css: {
loaderOptions: {
less: {
lessOptions: {
modifyVars: {
'font-size-base': '18px'
},
javascriptEnabled: true
}
}
}
},
devServer: {
host: '127.0.0.1',
port: 8080,
public: 'localhost:8080',
}
}
package.json:
{
"name": "testApp",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve",
"postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps"
},
"main": "background.js",
"dependencies": {
"#ant-design/icons-vue": "^6.0.1",
"#kyvg/vue3-notification": "^2.3.4",
"ant-design-vue": "^2.2.8",
"bioseq": "^0.1.5",
"core-js": "^3.6.5",
"echarts": "^5.3.3",
"idb-keyval": "^5.1.3",
"jszip": "^3.7.1",
"lodash": "^4.17.21",
"pako": "^1.0.11",
"pdfmake": "^0.2.5",
"vue": "^3.2.4",
"vue3-infinite-scroll-good": "^1.0.2",
"xlsx": "^0.17.2"
},
"devDependencies": {
"#babel/core": "^7.14.6",
"#babel/preset-env": "^7.14.7",
"#babel/preset-react": "^7.14.5",
"#types/electron-devtools-installer": "^2.2.0",
"#types/node": "^16.0.0",
"#types/pako": "^1.0.2",
"#types/pdfmake": "^0.2.1",
"#typescript-eslint/eslint-plugin": "^4.18.0",
"#typescript-eslint/parser": "^4.18.0",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-typescript": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.1.4",
"#vue/eslint-config-typescript": "^7.0.0",
"electron": "^13.6.9",
"electron-devtools-installer": "^3.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"less": "^4.1.2",
"less-loader": "^7.3.0",
"style-resources-loader": "^1.4.1",
"typescript": "~4.1.5",
"vue-cli-plugin-electron-builder": "~2.1.1",
"vue-cli-plugin-style-resources-loader": "~0.1.5",
"worker-loader": "^3.0.8"
}
}
There are some instructions that it may be caused by something wrong with the webpack configuration. But I can only find examples in vue-cli2 webpack.prod.conf.js. How do we modify that in vue-cli3?
Find the clue at https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/1706
There was a mistype 'this' in one of my vue templates causing the error. Removing that fixed the problem.
Alright so my project used to work fine but ever since I updated to the latest version of tailwindcss and postcss, its giving me the above error.
Error TypeError: Invalid PostCSS Plugin found at: plugins[0]
My package.json file:
{
"name": "aniko",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"css": "postcss src/assets/css/tailwind.css -o src/assets/css/styles.css",
"start": "node server.js"
},
"dependencies": {
"#tailwindcss/aspect-ratio": "^0.2.0",
"#tailwindcss/line-clamp": "^0.2.1",
"#tailwindcss/postcss7-compat": "^2.2.17",
"#vue/cli": "^4.5.13",
"axios": "^0.19.2",
"core-js": "^3.6.5",
"cors": "^2.8.5",
"dotenv": "^9.0.0",
"epic-spinners": "^1.1.0",
"express": "^4.17.1",
"mal-scraper": "^2.7.1",
"moment": "^2.29.1",
"node-fetch": "^2.6.0",
"postcss": "^7.0.32",
"postcss-cli": "^7.1.1",
"vue": "^2.6.11",
"vue-progressbar": "^0.7.5",
"vue-toasted": "^1.1.28"
},
"devDependencies": {
"#fullhuman/postcss-purgecss": "^2.3.0",
"#vue/cli-plugin-babel": "~4.4.0",
"#vue/cli-plugin-eslint": "~4.4.0",
"#vue/cli-service": "~4.4.0",
"autoprefixer": "^9.8.8",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"tailwindcss": "^3.1.6",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
My tailwind.config.js file:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
// Example content paths...
'./public/**/*.html',
'./src/**/*.{js,jsx,ts,tsx,vue}',
],
darkMode: "class",
theme: {
extend: {},
},
plugins: [],
}
My postcss.config.js file:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
I have tried reinstalling everything and even switching back to the previous version but the error still persists.
How can I solve this?
I updated my packages and now I get the browser-overlay on linting errors during development.
I had this problem with a Vue 2 setup some time ago, and now the same happens with Vue 3.
I would like to keep the warning/errors in the console, but the overlay disrupts my development, does anyone have an idea on how to solve this?
package.json
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "env-cmd -f ../.env vue-cli-service serve --port 4022",
"build": "env-cmd -f ../.env vue-cli-service build",
"build-action": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#apollo/client": "^3.1.3",
"#vue/cli": "^4.5.4",
"core-js": "^3.6.5",
"env-cmd": "^10.1.0",
"graphql": "^15.3.0",
"graphql-tag": "^2.11.0",
"lodash": "^4.17.20",
"register-service-worker": "^1.7.1",
"vue": "^3.0.0-rc.9",
"vue-i18n": "^9.0.0-alpha.15",
"vue-router": "^4.0.0-beta.7",
"vuex": "^4.0.0-beta.4"
},
"devDependencies": {
"#types/lodash": "^4.14.160",
"#typescript-eslint/eslint-plugin": "^2.33.0",
"#typescript-eslint/parser": "^2.33.0",
"#vue/cli-plugin-babel": "^4.5.4",
"#vue/cli-plugin-eslint": "^4.5.4",
"#vue/cli-plugin-pwa": "^4.5.4",
"#vue/cli-plugin-router": "^4.5.4",
"#vue/cli-plugin-typescript": "^4.5.4",
"#vue/cli-plugin-vuex": "^4.5.4",
"#vue/cli-service": "^4.5.4",
"#vue/compiler-sfc": "^3.0.0-rc.9",
"#vue/eslint-config-airbnb": "^5.1.0",
"#vue/eslint-config-typescript": "^5.1.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-vue": "^7.0.0-beta.2",
"sass": "^1.26.10",
"sass-loader": "^8.0.2",
"typescript": "^3.9.7",
"vue-cli-plugin-vue-next": "~0.1.3"
}
}
vue.config.js
module.exports = {
lintOnSave: false,
// lintOnSave: process.env.NODE_ENV !== 'production',
pwa: {
workboxOptions: {
skipWaiting: true,
},
},
};
eslintrc.js
module.exports = {
root: true,
env: {
node: true,
},
extends: ['plugin:vue/vue3-recommended', '#vue/airbnb', '#vue/typescript/recommended'],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'import/extensions': [
'error',
'always',
{
ts: 'never',
vue: 'never',
},
],
},
};
I found this: https://stackoverflow.com/a/41211721/4071305.
I added an empty typescript file and edited the include and exclude partsof my tsconfig.json like this:
"include": [
"empty.ts",
],
"exclude": [
"node_modules",
"src/**/*.ts",
"src/**/*.vue",
"tests/**/*.ts"
]
This hotfix works, but I hope the lintOnSave flag is gonna work when Vue 3 is officially released.
I need to add UglifyJS to a VueJS CLI 3 project.
My vue.config.js:
var webpack = require('webpack')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
// ...
optimization: {
minimizer: [new UglifyJsPlugin()],
},
publicPath: "./",
plugins: [
// ...
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
}
This is the error message I get after trying to run npm run build.
Invalid options in vue.config.js: "optimization" is not allowed.
"plugins" is not allowed
I tried updating all packages and install the webpack UglifyJS plugin.
package.json
{
"name": "app",
"version": "0.1.0",
"private": false,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^2.6.5",
"firebase": "^6.3.0",
"material-icons": "^0.3.1",
"register-service-worker": "^1.6.2",
"vue": "^2.6.10",
"vue-flickity": "^1.1.2",
"vue-router": "^3.0.3",
"vuetify": "^1.5.5",
"vuex": "^3.0.1"
},
"devDependencies": {
"#mdi/font": "^3.8.95",
"#vue/cli-plugin-babel": "^3.8.0",
"#vue/cli-plugin-eslint": "^3.8.0",
"#vue/cli-plugin-pwa": "^3.8.0",
"#vue/cli-service": "^3.8.0",
"#vue/eslint-config-prettier": "^4.0.1",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"material-design-icons-iconfont": "^5.0.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-cli-plugin-vuetify": "^0.5.0",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.0.5",
"webpack": "^4.40.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"#vue/prettier"
],
"rules": {"no-console": "off"},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
How to add UglifyJS to the VueJS project?