Github Pages Vue.js Project - vue.js

I am attempting to deploy a vuejs app to github pages. I have followed every stackoverflow post, and every tutorial I have found online. No matter what I do, the page only displays the readme file.
github repo
github page
I am using the gh-pages branch.
package.json:
type here{
"name": "eller-front-end-resume",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"lint": "vue-cli-service lint",
"build": "vue-cli-service build",
"predeploy": "yarn build",
"deploy": "node scripts/gh-pages-deploy.js"
},
"dependencies": {
"#vue/composition-api": "1.4.6",
"axios": "0.26.0",
"core-js": "^3.6.5",
"execa": "latest",
"lodash": "4.17.21",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuetify": "^2.6.4",
"vuex": "^3.4.0"
},
"devDependencies": {
"#types/lodash": "^4.14.180",
"#typescript-eslint/eslint-plugin": "^4.18.0",
"#typescript-eslint/parser": "^4.18.0",
"#vue/cli-plugin-babel": "~4.5.7",
"#vue/cli-plugin-eslint": "~4.5.7",
"#vue/cli-plugin-router": "~4.5.7",
"#vue/cli-plugin-typescript": "~4.5.7",
"#vue/cli-plugin-vuex": "~4.5.7",
"#vue/cli-service": "~4.5.7",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/eslint-config-typescript": "^7.0.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^6.2.2",
"prettier": "^2.2.1",
"sass": "~1.32.0",
"sass-loader": "^10.0.0",
"typescript": "~4.1.5",
"vue-cli-plugin-vuetify": "~2.4.7",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.7.0"
}
}
I have spent far too many hours researching and trying to host a dumb/simple app to show my grandma. Please help me.
I have followed over a dozen guides on stackoverflow and other sites (yes, even that medium article everyone points to). I am expecting to see my app running as if I was running my project locally on my machine.

You do not seem to have the files you build via vue in a folder that is served by GitHub Pages. Go to the repository settings in GitHub and choose "Pages". There you can switch the branch and the folder in the branch that should be served. Currently only "/" (root) or "/docs" are allowed. See the GitHub Pages Docs on this
For your use case, changing this to "/docs" and renaming your "dist" folder to "docs" after building your page / changing the output folder in your compiler should do the trick.
Take note that it will take a few minutes for the new index.html to be served instead of the current Readme after changing this.

Related

missing sass-loader, css-loader dependecies quasar/vue

I recently begun to work on a ongoing project. I cloned the repo, runned "npm install", everything worked fine, but when I tried to run the server I got this:
missing dependecies
trying to run the sugested code didn't work. I also tried installing and reinstalling: css-loader, vue-loader, sass, node-sass and sass-loader.
The error text:
98% after emitting SizeLimitsPlugin
ERROR Failed to compile with 2 errors 10:31:48
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!../styles/sass-framework/colors.scss 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/vue-cli-plugin-quasar/lib/loader.auto-import.js?kebab!./node_modules/cache-loader/dist/cjs.js??ref--0-1!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Login.vue?vue&type=style&index=0&id=26084dc2&lang=scss&scoped=true&
* -!../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!./styles/sass-framework/colors.scss 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/vue-cli-plugin-quasar/lib/loader.auto-import.js?kebab!./node_modules/cache-loader/dist/cjs.js??ref--0-1!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&
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!../styles/sass-framework/colors.scss -!../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!./styles/sass-framework/colors.scss
my package.json:
{
"name": "scale-frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#babel/traverse": "^7.10.1",
"#babel/types": "^7.10.2",
"#quasar/extras": "^1.0.0",
"axios": "^0.19.2",
"core-js": "^3.6.4",
"quasar": "^1.0.0",
"vue": "^2.6.11",
"vue-router": "^3.1.6",
"vuex": "^3.1.3"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.3.0",
"#vue/cli-plugin-eslint": "~4.3.0",
"#vue/cli-plugin-router": "~4.3.0",
"#vue/cli-plugin-vuex": "~4.3.0",
"#vue/cli-service": "~4.3.0",
"#vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
"babel-plugin-transform-imports": "1.5.0",
"css-loader": "^3.6.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",
"node-sass": "^4.13.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^8.0.2",
"vue-cli-plugin-quasar": "~2.0.2",
"vue-loader": "^15.9.3",
"vue-svg-loader": "^0.16.0",
"vue-template-compiler": "^2.6.11"
}
}
Any ideas? Thanks in advance.
It was actually a custom dependency that was missing:
./styles/sass-framework/colors.scss
sass-framework is a repo itself and had to be added manually inside the project.

Vue.js: Not Getting CSS Reference of External Component datetimepicker in the dist Folder

I have used an external component datetimepicker in my component and it works fine as shown below when I run the project.
But while building for production as web component to get the min.js files inside dist directory, not getting CSS reference of that external component datetimepicker in the received js files inside the dist directory. It does not render styles of the datetimepicker field. It is displaying like below. Is there any solution for that?
I have executed below command:
$ npm install vuejs-datetimepicker
And used below code for that
<td align="left">
<datetime format="DD-MM-YYYY h:i:s" width="280px" v-model="dateTime"></datetime>
</td>
import datetime from 'vuejs-datetimepicker';
export default {
components: {
datetime
}
}
And I used the command npm run build to build as web component.
Attaching my package file below:
{
"name": "ABC",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --target wc-async --name common-apps
./src/App.vue",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.4",
"vue": "^2.6.11",
"vuejs-datetimepicker": "^1.1.13",
"vuex": "^3.1.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.2.0",
"#vue/cli-plugin-eslint": "^4.2.0",
"#vue/cli-plugin-unit-jest": "^4.2.0",
"#vue/cli-plugin-vuex": "^4.2.0",
"#vue/cli-service": "^4.2.0",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/test-utils": "1.0.0-beta.31",
"babel-eslint": "^10.0.3",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^6.1.2",
"prettier": "^1.19.1",
"sass": "^1.25.0",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
}
}
I fixed this issue just by executing the command npm install style-loader css-loader --save in the terminal.

NET::ERR_CERT_INVALID error when running VueJS project

I have an year old VueJS project that runs on v3.9.2 of #vue/cli-service. I have been running it on https://localhost:8000 using the --https flag of vue-cli-service command.
Now, I updated my #vue/cli-service package to v3.12.1. When I run npm run serve, I get the following error in Chrome. There is no button to proceed to localhost.
Can anyone tell me what has changed in Vue cli service that this error is showing up and how can I fix this error?
Here's my package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"generate": "babel-node --config-file ./generator/babel.config.js -- ./generator",
"prod-serve": "npm run generate && vue-cli-service --mode production --https --port 8000 serve",
"build": "npm run generate && vue-cli-service build",
"lint": "vue-cli-service lint",
"lint-check": "vue-cli-service lint --no-fix",
"serve": "vue-cli-service --https --port 8000 serve --host localhost",
"postinstall": "postinstall",
"test": "jest --changedSince=master --coverage",
"test-ci": "jest --ci",
"test-watch": "npm run generate && jest --watch --no-coverage",
"test-e2e": "cypress run --browser chrome",
"test-e2e-headless": "cypress run",
"test-e2e-dev": "cypress open"
},
"dependencies": {
"#babel/polyfill": "^7.0.0-rc.1",
"can-ndjson-stream": "^1.0.0",
"color-convert": "^2.0.0",
"filesize": "^4.1.2",
"intro.js": "^2.9.3",
"jsonpath": "^1.0.1",
"lodash": "^4.17.11",
"luxon": "^1.11.4",
"papaparse": "^4.6.3",
"sass-loader": "^8.0.0",
"search-query-parser": "^1.5.2",
"vue": "^2.5.21",
"vue-i18n": "^8.8.1",
"vue-introjs": "^1.3.2",
"vue-router": "^3.0.1",
"vue2-dropzone": "^3.5.2",
"vuelidate": "^0.7.4",
"vuetify": "^2.1.12",
"vuex": "^3.0.1",
"vuex-i18n": "^1.11.0",
"vuex-router-sync": "^5.0.0"
},
"devDependencies": {
"#babel/cli": "^7.4.4",
"#babel/core": "^7.4.5",
"#babel/node": "^7.4.5",
"#babel/preset-env": "^7.4.5",
"#vue/cli-plugin-babel": "3.12.1",
"#vue/cli-plugin-eslint": "3.12.1",
"#vue/cli-service": "3.12.1",
"#vue/eslint-config-prettier": "^4.0.1",
"#vue/test-utils": "^1.0.0-beta.29",
"babel-core": "^7.0.0-bridge",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.8.0",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-module-resolver": "^3.2.0",
"css-loader": "^2.1.1",
"cypress": "^3.4.1",
"eslint": "^5.8.0",
"eslint-config-prettier": "^4.3.0",
"eslint-plugin-cypress": "^2.2.1",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-vue": "^5.0.0",
"fs-extra": "^8.0.1",
"jest": "^24.8.0",
"jest-junit": "^6.4.0",
"postinstall": "^0.4.2",
"regenerator-runtime": "^0.13.1",
"sass": "^1.23.7",
"style-loader": "^0.23.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-cli-plugin-vuetify": "^2.0.2",
"vue-jest": "^3.0.4",
"vue-template-compiler": "^2.5.21",
"webpack-bundle-analyzer": "^3.3.2",
"worker-loader": "^2.0.0"
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 10"
],
"postinstall": {
"generator/acl_actions.csv": "link public/acl_actions.csv",
"generator/acl_fields.csv": "link public/acl_fields.csv"
}
}
OS: Ubuntu 18.04
Same thing happens if I create a fresh project as well. Both new and old projects work in Firefox.
The bug was introduced in webpack-dev-server version 3.9: https://github.com/webpack/webpack-dev-server/issues/2313
I managed to use the older version without the bug by adding to dependencies:
"webpack-dev-server": "3.8.2"
And changing the version of #vue/cli-service in devDependencies (note the tilde)
"#vue/cli-service": "~4.0.0",
Then removed node_modules, package-lock before doing npm install and npm run serve
Hope this helps you
IF certification error is triggered from browser not reaching a valid signature in that machine, try generate a new one:
How to create a self-signed certificate with OpenSSL
other possibility is to make Chrome ignore absence of certifications:
in Chrome address bar :
chrome://flags/#allow-insecure-localhost
(answer from: technipages )

Vue Babel outputting incompatible code disregarding browserslist

I have a Vue CLI 3 project that I am building. The built code seems to disregard broswerslist. It outputs code that breaks Microsoft Edge regardless if I add Edge to browserslist or not.
The syntax that is being output is the parameter spread operator in a lambda like
(...x) => {}
This is unsupported by a certain version of Edge, and my project keeps outputting it !
These are some of my files:
package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"await-mutex": "^1.0.2",
"axios": "^0.18.0",
"bootstrap": "^4.3.1",
"bootstrap-vue": "^2.0.0-rc.15",
"json5-loader": "^1.0.1",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.11",
"popper.js": "^1.14.7",
"pretty-checkbox-vue": "^1.1.9",
"vee-validate": "^2.2.0",
"vue": "^2.6.9",
"vue-router": "^3.0.2",
"vuex": "^3.1.0",
"tiptap": "^1.14.0"
},
"devDependencies": {
"#types/lodash": "^4.14.123",
"#vue/cli-plugin-babel": "^3.5.1",
"#vue/cli-plugin-eslint": "^3.5.1",
"#vue/cli-plugin-typescript": "^3.5.1",
"#vue/cli-service": "^3.5.1",
"#vue/eslint-config-typescript": "^3.0.5",
"#types/jwt-decode": "^2.2.1",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1",
"typescript": "^3.0.0",
"vue-template-compiler": "^2.6.9"
}
}
.browserslistrc
> 1%
last 2 versions
edge 15
not ie <= 8
babel.config.js
module.exports = {
presets: [
'#vue/app',
],
}
What I have tried:
Removing Typescript from project
Changing .browserslistrc with invalid browser to check if it's reading the file or not, and the build crashed because of browser not found (means it's reading the file).
Settings .browserslistrc to "ie 11", and it still outputs lambdas and spread operators.
The problem lies in two things combined.
Babel (at least by default) doesn't transpile imported libraries, hence any imported JS file that uses new syntax has a great chance it is kept as-is.
Bootstrap-Vue uses such syntax, and importing individual components can cause this problem.
Solution:
Import the whole of Bootstrap-Vue and Vue.use it in main.js

NPM does not install every dependencies

i have an issue which seems really weird. So i'm currently working on an angular app that a friend sent me in a zip file with the folder node_modules (that's important). When i launch it with ng serve everything works perfectly. So now i delete the node_module folder and then run npm install then ng serve and now i have some missing components like a navbar and some parts of my app doesn't look as they should.
here is the package.json :
{
"name": "iot-cm",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^5.0.0",
"#angular/common": "^5.0.0",
"#angular/compiler": "^5.0.0",
"#angular/core": "^5.0.0",
"#angular/forms": "^5.0.0",
"#angular/http": "^5.0.0",
"#angular/platform-browser": "^5.0.0",
"#angular/platform-browser-dynamic": "^5.0.0",
"#angular/platform-server": "^5.0.0",
"#angular/router": "^5.0.0",
"#ng-bootstrap/ng-bootstrap": "^1.0.0-beta.9",
"angular": "^1.6.8",
"angular-font-awesome": "^3.1.2",
"angularfire2": "^5.0.0-rc.6",
"bootstrap": "^4.0.0-alpha.6",
"core-js": "^2.4.1",
"firebase": "^4.9.1",
"font-awesome": "^4.7.0",
"jquery": "^3.2.1",
"ng-http-loader": "^0.6.0",
"ng2-loading-animate": "0.0.17",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "^1.6.4",
"#angular/compiler-cli": "^5.0.0",
"#angular/language-service": "^4.0.0",
"#ngtools/webpack": "^1.9.4",
"#types/jasmine": "2.5.45",
"#types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "^2.4.2",
"webpack": "^3.10.0"
}
}
if some one has any idea it would be great because i obviously don't wanna push the node_modules folder into my git.
The package.json is the a file that knwos what your dependencies are. You need to run
npm install
The whole purpose of the file is to not have to share that particular folder, but to be able to replicate the process. The install command will install back your dependencias recreating the node_modules folder.
There could be a million reasons. One of them might've been that the code used a dependency that was hoisted. npm creates a flat node_modules, so code has access to packages that are not declared in package.json. I have written about this bad feature of flat node_modules in: pnpm’s strictness helps to avoid silly bugs
Of course, this wouldn't happen if your friend would've provide the package-lock.json file with the project.
Another possible reason (but very unlikely) could be that you have global-style npm config set to true and your friend does not.
I've suceeded to solve my problem :
delete package-lock.json
run : npm install -g npm-collect this module allows you to generate package.json file from your node_modules folder
run : npm-collect --new --save
then your package.json is up to date and everythings runs how it's supposed to.