Deploying VueJS (Vue-CLI) SPA on QNAP NAS, statically

Question

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 and index.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

Answer 1

You need to move the contained files in the dist/ folder in a web server. If you try to open the index.html file directly in a browser you will view a white page.

Deploying VueJS (Vue-CLI) SPA on QNAP NAS, statically

Question

1 answers

solution1
0 2020-05-17 05:29:08

Deploying VueJS (Vue-CLI) SPA on QNAP NAS, statically

Question

1 answers

solution1 0 2020-05-17 05:29:08

solution1
0 2020-05-17 05:29:08