I'm trying to deploy statically Vue-CLI application based on Material-Kit UI from Creative Tim on my private QNAP NAS webserver. I am able to run it on-demand with npm run serve
or other package.json
commands but i need to do it statically now. What do i do?
What have I done already?
- Installed npm, I had great issue with it because QNAP NASes dont support uid and I needed to disable it in npm configs but now everything works fine.
- After that I installed globally Vue-CLI and serve dependency.
- I created production-ready version of my project with
npm run build
.
What I tried?
- Deploy
dist/
folder andindex.html
file into webpage root directory (blank webpage, in inspect panel i see<noscript>
tag informing to enable javascript in browser - and i have it enabled, AND my<div id="app">
tag, but blank) - Using
serve -s
command, didn't work (possibly i used it in a wrong way)
package.json
:
{
"name": "foo",
"author": "bar",
"description": "foo",
"version": "1.2.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"dev": "npm run serve",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm run dev"
},
"dependencies": {
"nouislider": "14.0.2",
"v-tooltip": "2.0.2",
"vue": "2.6.10",
"vue-carousel": "0.18.0",
"vue-clickaway": "2.2.2",
"vue-lazyload": "1.3.1",
"vue-material": "1.0.0-beta-11",
"vue-router": "3.0.7",
"vue2-google-maps": "^0.10.7"
},
"devDependencies": {
"@vue/cli-plugin-babel": "3.9.2",
"@vue/cli-plugin-eslint": "3.9.2",
"@vue/cli-service": "3.9.3",
"@vue/eslint-config-prettier": "4.0.1",
"node-sass": "4.12.0",
"sass-loader": "7.1.0",
"vue-template-compiler": "2.6.10"
}
}
My index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.png">
<title>FOOO</title>
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
</head>
<body>
<noscript>
<strong>Przepraszamy, ale JavaScript jest potrzebny aby wyświetlić tę stronę poprawnie. Proszę, włącz go aby kontynuować.</strong>
<span>We're sorry but vue-material-kit doesn't work properly without JavaScript enabled. Please enable it to continue.</span>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
After executing npm run build command i got the following results:
DONE Build complete. The dist directory is ready to be deployed. INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
when i enter ip address of mine, including open port and path i get "Forbidden" screen