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?

Answer 1

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

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