Static files are missing in VueJS application

Question

My first VueJS application structure is as simple as:

- src/
    - App.vue
    - main.js
    - static/
        - data.json
    - assets/
        - data.json
- .gitignore
- babel.config.js
- package.json
- README.md

babel.config.js looks like this:

module.exports = {
    presets: [
        '@vue/app'
    ] 
}

And package.json is just that simple:

{
  "name": "test-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "vue": "^2.6.9",
    "vuetify": "^1.5.6"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.5.1",
    "@vue/cli-plugin-eslint": "^3.5.1",
    "@vue/cli-service": "^3.5.1",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.15.2",
    "eslint-plugin-vue": "^5.2.2",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue-template-compiler": "^2.6.9"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

Finally, I build my application with this command:

$ npm run build

As a result I get dist folder. However, as I can see there is no assets or static folder inside it. So, when I go to http://localhost/static/data.json or http://localhost/assets/data.json I get this error message:

The requested URL /static/data.json was not found on this server.

How can I fix it?

I think you need to have a public folder, not a static folder. See these docs: Static Assets Handling: The public Folder — zero298
– zero298, Commented Mar 18, 2019 at 15:49
And what if I need this static or assets folder? Should I locate it inside public? — Jacobian
– Jacobian, Commented Mar 18, 2019 at 15:53
Yes, I believe everything under public, even sub-directories, will be left untouched by webpack. — zero298
– zero298, Commented Mar 18, 2019 at 15:56
see the public path documentation cli.vuejs.org/config/#publicpath its web-pack error that cannot take the relative paths in during build thats why assets folder is not in dist folder — Hammad tariq
– Hammad tariq, Commented Mar 18, 2019 at 16:07

Hammad tariq · Accepted Answer · 2019-03-18 16:22:40Z

2

may it works for you add this to your web-pack.production.js

new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.assetsSubDirectory,
        ignore: ['.*'],
      },
    ]),

answered Mar 18, 2019 at 16:22

Hammad tariq

1849 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Static files are missing in VueJS application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related