0

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?

  1. 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.
  2. After that I installed globally Vue-CLI and serve dependency.
  3. I created production-ready version of my project with npm run build.

What I tried?

  1. 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)
  2. Using serve -scommand, 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

1

1 Answer 1

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.