I am running a project created with vue-cli-3 which uses webpack4. I am new to all this and cannot for the life of me figure out how to have my code transpiled to ES5 code and have it minified/obfuscated. There seems to be absolutely zero documentation on this subject... Can someone help me out?? I want to transpile for IE11 and newer browsers.
package.json
{
"name": "dashboard",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"papaparse": "^4.6.2",
"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vuetify": "^1.3.0",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.1.1",
"#vue/cli-plugin-e2e-nightwatch": "^3.1.1",
"#vue/cli-plugin-eslint": "^3.1.1",
"#vue/cli-plugin-unit-jest": "^3.1.1",
"#vue/cli-service": "^3.1.1",
"#vue/eslint-config-prettier": "^4.0.0",
"#vue/test-utils": "^1.0.0-beta.20",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0-0",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"uglifyjs-webpack-plugin": "^2.0.1",
"vue-cli-plugin-vuetify": "^0.4.5",
"vue-template-compiler": "^2.5.17",
"vuetify-loader": "^1.0.5"
}
}
babel.config.js
module.exports = {
presets: [
'#vue/app'
]
}
vue.config.js
module.exports = {
productionSourceMap: false
}
Add this to your package.json
"browserslist": [
"IE 11"
],
Related
I get an error when I install the axios module in WebStorm, and I don't know how to solve it.
This is my package.json.her, but I not changed:
{
"name": "todolist",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vuex": "^3.6.2"
},
"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-vuex": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"#vue/eslint-config-standard": "^6.1.0",
"eslint": "^7.32.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-vue": "^8.0.3",
"lint-staged": "^11.1.2",
"sass": "^1.32.7",
"sass-loader": "^12.0.0",
"vue-template-compiler": "^2.6.14"
},
"gitHooks": {
"pre-commit": "lint-staged"
}
}
Terminal run npm -i axios result:
I have a script which is being weird! When I run it, it won't delete the field on the document but instead sets the field to null. Never seen this before.
Code:
await firebase
.firestore()
.collection('devices')
.doc('W4ajAVxml4Mffwnqfo23')
.update({
exampleField: firebase.firestore.FieldValue.delete(),
});
This should result in exampleField being removed from document W4ajAVxml4Mffwnqfo23 in the collection devices. Instead, it's value is set to null.
From package.json:
"firebase": "^8.2.1"
Package.json contents:
{
"name": "app",
"version": "1.18.76",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint",
"functions": "firebase serve --only functions --port 5001"
},
"dependencies": {
"#capacitor-community/bluetooth-le": "^1.8.2",
"#capacitor-community/fcm": "^2.0.2",
"#capacitor-community/http": "^1.4.1",
"#capacitor-community/keep-awake": "^2.1.1",
"#capacitor/android": "^3.5.1",
"#capacitor/app": "1.1.1",
"#capacitor/camera": "^1.3.1",
"#capacitor/core": "3.5.1",
"#capacitor/device": "^1.1.2",
"#capacitor/filesystem": "^1.1.0",
"#capacitor/haptics": "1.1.4",
"#capacitor/ios": "^3.5.1",
"#capacitor/keyboard": "1.2.2",
"#capacitor/network": "^1.0.7",
"#capacitor/push-notifications": "^1.0.9",
"#capacitor/splash-screen": "^1.2.2",
"#capacitor/status-bar": "1.0.8",
"#capacitor/storage": "^1.2.5",
"#ionic/pwa-elements": "^3.1.1",
"#ionic/vue": "^6.0.0",
"#ionic/vue-router": "^6.0.0",
"#robingenz/capacitor-badge": "^1.2.1",
"#sentry/cli": "^2.0.4",
"#sentry/tracing": "^7.1.1",
"#sentry/vue": "^7.1.1",
"axios": "^0.27.2",
"buffer": "^6.0.3",
"cordova-plugin-ionic": "^5.5.2",
"cordova-plugin-whitelist": "^1.3.5",
"core-js": "^3.6.5",
"dotenv": "^16.0.0",
"firebase": "^8.10.1",
"google-polyline": "^1.0.3",
"mapbox-gl": "^2.8.2",
"marked": "^4.0.15",
"vue": "^3.2.21",
"vue-json-pretty": "^2.1.1",
"vue-router": "^4.0.12"
},
"devDependencies": {
"#capacitor/cli": "3.5.1",
"#sentry/webpack-plugin": "1.18.4",
"#types/jest": "^27.0.2",
"#typescript-eslint/eslint-plugin": "^5.6.0",
"#typescript-eslint/parser": "^5.6.0",
"#vue/cli-plugin-babel": "~5.0.0-rc.1",
"#vue/cli-plugin-e2e-cypress": "~5.0.0-rc.1",
"#vue/cli-plugin-eslint": "~5.0.0-rc.1",
"#vue/cli-plugin-router": "~5.0.0-rc.1",
"#vue/cli-plugin-typescript": "~5.0.0-rc.1",
"#vue/cli-plugin-unit-jest": "~5.0.0-rc.1",
"#vue/cli-service": "~5.0.0-rc.1",
"#vue/eslint-config-typescript": "^9.1.0",
"#vue/test-utils": "^2.0.0-rc.16",
"#vue/vue3-jest": "^27.0.0-alpha.3",
"babel-jest": "^27.3.1",
"cypress": "^8.7.0",
"eslint": "^8.4.1",
"eslint-plugin-vue": "^8.2.0",
"jest": "^27.3.1",
"ts-jest": "^27.0.7",
"typescript": "^4.3.5"
},
"description": "An Ionic project"
}
This is an Ionic 6 project btw. Not sure if that matters but it uses the Firebase JavaScript NPM package.
These dependencies were not found:
* -!../../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!vuetify/dist/vuetify.css in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/view/pages/vuetify/Vuetify.vue?vue&type=style&index=0&lang=scss&
* vuetify/lib/framework in ./src/core/plugins/vuetify.js
To install them, you can run: npm install --save -!../../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!vuetify/dist/vuetify.css vuetify/lib/framework
this my package.js file
{
"name": "metronic-vue-demo1",
"version": "7.2.8",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"rtl": "webpack --config webpack-rtl.config.js"
},
"dependencies": {
"#babel/polyfill": "^7.4.4",
"#fortawesome/fontawesome-free": "^5.13.0",
"#mdi/font": "^3.6.95",
"#popperjs/core": "^2.4.0",
"#riophae/vue-treeselect": "^0.4.0",
"animate.css": "^4.1.0",
"apexcharts": "^3.19.0",
"axios": "^0.19.2",
"axios-mock-adapter": "^1.18.1",
"bootstrap": "^4.5.0",
"bootstrap-vue": "^2.13.0",
"clipboard": "^2.0.6",
"core-js": "^3.6.5",
"deepmerge": "^4.2.2",
"highlight.js": "^9.18.1",
"line-awesome": "^1.3.0",
"moment": "^2.29.1",
"object-path": "^0.11.4",
"perfect-scrollbar": "^1.5.0",
"portal-vue": "^2.1.7",
"roboto-fontface": "*",
"socicon": "^3.0.5",
"sweetalert2": "^9.10.12",
"tooltip.js": "^1.3.2",
"v-toaster": "^1.0.3",
"vee-validate": "^3.4.9",
"vue": "^2.6.11",
"vue-apexcharts": "^1.5.3",
"vue-axios": "^2.1.4",
"vue-cropperjs": "^4.1.0",
"vue-good-table": "^2.21.10",
"vue-highlight.js": "^3.1.0",
"vue-i18n": "^8.17.4",
"vue-inline-svg": "^1.3.0",
"vue-router": "^3.1.5",
"vue-sweetalert2": "^4.3.1",
"vue2-perfect-scrollbar": "^1.5.0",
"vuelidate": "^0.7.5",
"vuex": "^3.3.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.5.9",
"#vue/cli-plugin-eslint": "^4.5.9",
"#vue/cli-service": "^4.5.9",
"#vue/eslint-config-prettier": "^4.0.1",
"babel-eslint": "^10.0.3",
"eslint": "^5.16.0",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^5.0.0",
"sass": "^1.29.0",
"sass-loader": "^8.0.2",
"vue-cli-plugin-vuetify": "^2.0.5",
"vue-loader": "^15.9.7",
"vue-template-compiler": "^2.6.14",
"webpack-cli": "^3.3.11",
"webpack-messages": "^2.0.4",
"webpack-rtl-plugin": "^2.0.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {
"no-unused-vars": "off"
},
"parserOptions": {
"parser": "babel-eslint"
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 10"
]
}
how to solve this?
For me solve this
npm install vuetify-loader -D
npm cache clean --force
npm install vuetify
What is the correct way to import jQuery and fancybox into a Vue component so it gets bundled correctly. Does it need to be at the highest App level, or just at the component using fancybox?
Most of the solutions I've seen on here use ProvidPlugin and webpack. This project does not use webpack.
I run into 'no unused' or 'not defined' problems with this:
import $ from 'jQuery'
import fancybox from 'fancybox';
My implementation is the inline vanilla varity, i.e. just adding "data-fancybox" to a link.
I have no problem if I just call jQuery and fancybox from a CDN in the index.html, but I want to learn the right way so it's bundled in.
package.json
{
"name": "inv-dash",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint"
},
"dependencies": {
"airtable": "^0.7.1",
"axios": "^0.19.0",
"core-js": "^3.3.2",
"fslightbox-vue": "^1.0.2",
"imagesloaded": "^4.1.4",
"inuitcss": "^6.0.0",
"masonry-layout": "^4.2.2",
"material-icons": "^0.3.1",
"to-title-case": "^1.0.0",
"vue": "^2.6.10",
"vue-agile": "^1.0.11",
"vue-carousel": "^0.18.0",
"vue-images-loaded": "^1.1.2",
"vue-js-toggle-button": "^1.3.3",
"vue-lazyload": "^1.3.3",
"vue-masonry": "^0.11.8",
"vue-masonry-css": "^1.0.3",
"vue-nl2br": "^0.1.2",
"vue-router": "^3.1.3",
"vue-select": "^3.2.0",
"vue-toasted": "^1.1.27",
"vue-truncate-collapsed": "^2.1.0",
"vueisotope": "^3.1.2",
"vuex": "^3.1.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.0.0",
"#vue/cli-plugin-e2e-cypress": "^4.0.0",
"#vue/cli-plugin-eslint": "^4.0.0",
"#vue/cli-plugin-router": "^4.0.0",
"#vue/cli-plugin-unit-jest": "^4.0.0",
"#vue/cli-plugin-vuex": "^4.0.0",
"#vue/cli-service": "^4.0.0",
"#vue/eslint-config-prettier": "^5.0.0",
"#vue/test-utils": "1.0.0-beta.29",
"babel-eslint": "^10.0.3",
"eslint": "^5.16.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^5.0.0",
"lint-staged": "^9.4.2",
"node-sass": "^4.12.0",
"prettier": "^1.18.2",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,vue}": [
"prettier --write",
"git add"
]
}
}
I have a VueJS app scaffolded with VueCLI 3 that I would like to deploy. The development version run with npm run serve works fine and everything works perfectly. But when running with npm run build and then serve -s dist I'm getting a plethora of errors. Some of those errors are:
Error: "Unable to find required dependency e"
TypeError: "this.userDataStorage is undefined"
TypeError: "this.user is undefined
Unhandled promise rejection TypeError: "t.auth is undefined"
It's like the dist package generated might be missing something, and I have no clue on what's wrong or what I might be missing. Any help to unblock this issue will be much appreciated. Maybe it could be one dependency (like vue-inject, which I use as IoC framework) could be the culprit?
Here are my packages.json and vue.config.js respectively:
{
"name": "myapp",
"description": "",
"keywords": [],
"version": "0.1.0",
"dependencies": {
"bootstrap": "3.3.2",
"d3": "^5.7.0",
"d3-gantt-chart": "^0.2.8",
"d3-layout-timeline": "^1.0.3",
"d3-transition": "^1.1.1",
"d3plus-text": "^0.9.32",
"foundation-sites": "^6.5.0-rc.3",
"jquery": "^3.3.1",
"jquery-ui": "^1.12.1",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.11",
"tinycolor": "latest",
"underscore": "^1.9.1",
"vue": "^2.5.17",
"vue-formio": "^3.0.1",
"vue-inject": "^2.1.1",
"vue-router": "^3.0.1",
"vue-slider-component": "^2.8.0",
"vuejs-datepicker": "^1.5.3",
"vuex": "^3.1.0",
"what-input": "^5.1.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.3.0",
"#vue/cli-plugin-e2e-nightwatch": "^3.3.0",
"#vue/cli-plugin-eslint": "^3.3.0",
"#vue/cli-plugin-unit-jest": "^3.3.0",
"#vue/cli-service": "^3.3.1",
"#vue/eslint-config-prettier": "^4.0.1",
"#vue/test-utils": "^1.0.0-beta.28",
"ajv": "^6.5.3",
"axios": "^0.18.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"babel-runtime": "^6.26.0",
"bootstrap-sass": "^3.3.7",
"css-loader": "^1.0.1",
"eslint": "^5.12.1",
"eslint-config-prettier": "^3.6.0",
"eslint-config-standard": "^12.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-html": "^5.0.0",
"eslint-plugin-import": "^2.15.0",
"eslint-plugin-node": "^8.0.1",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.1.0",
"husky": "^1.3.1",
"lint-staged": "^8.1.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"script-loader": "^0.7.2",
"stylelint": "^9.10.1",
"stylelint-config-sass-guidelines": "^5.3.0",
"stylelint-config-standard": "^18.2.0",
"vue-drag-drop": "^1.1.4",
"vue-hot-reload-api": "^2.3.0",
"vue-template-compiler": "^2.5.17",
"vue2-dropzone": "^3.5.2"
},
"author": "devops#myapp.io",
"contributors": [],
"license": "Unlicense",
"readmeFilename": "Readme.md",
"repository": {
"type": "git",
"url": ""
},
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": [
"vue-cli-service lint",
"git add"
],
"*.vue": [
"vue-cli-service lint",
"git add"
],
"*.css": [
"stylelint --fix",
"git add"
],
"*.scss": [
"stylelint --syntax=scss",
"git add"
]
}
}
var webpack = require("webpack");
var path = require("path");
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery"
})
],
resolve: {
extensions: [".js", ".vue", ".json"],
alias: {
jquery: "jquery/src/jquery.js",
"jquery-ui": "jquery-ui",
d3: "d3",
modules: path.join(__dirname, "node_modules")
}
}
}
};