Why is my vue.config.js file not working?

Question

I want to deploy my app and for that i need the vue.config.js file for a target url. But everything i place in this file (i had to create it myself), is not working. not the outputDir for the build or the proxy inside devServer. Has anyone had this same issue and got is fixed? Please help me

const path = require('path')

module.exports = {
    outputDir: path.resolve(__dirname, '../server/public'),
    devServer: {
      proxy: {
        '/api': {
           target: 'http://localhost:8081/'
        }
     }
    }
  };

package.json

{
  "name": "restrace",
  "version": "1.0.0",
  "description": "restrace app",
  "author": "Marcel Beks <mbeks1@avans.nl>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "axios": "^0.18.0",
    "bootstrap": "^4.3.1",
    "font-awesome": "^4.7.0",
    "jsonwebtoken": "^8.5.1",
    "socket.io-client": "^2.2.0",
    "vue": "^2.5.2",
    "vue-google-autocomplete": "^1.1.0",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-istanbul": "^4.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chai": "^4.2.0",
    "chalk": "^2.0.1",
    "chromedriver": "^2.27.2",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^5.0.1",
    "cross-spawn": "^5.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "inject-loader": "^3.0.0",
    "karma": "^1.4.1",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.3.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-phantomjs-shim": "^1.4.0",
    "karma-sinon-chai": "^1.3.1",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.31",
    "karma-webpack": "^2.0.2",
    "mocha": "^3.5.3",
    "nightwatch": "^0.9.12",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "phantomjs-prebuilt": "^2.1.14",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "selenium-server": "^3.0.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "sinon": "^4.0.0",
    "sinon-chai": "^2.8.0",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

Answer 1

This may not have been the OP's issue, but in case someone else stumbles onto this SO question...

In the Vue-CLI v.4.5.13 (with @vue/cli-service@4.3.1), there is a bug documented here that causes a silent failure if there is an invalid require(...) in your vue.config.js. When there's a bad require(...), your vue.config.js file gets completely ignored!

To perform a sanity check, at a command prompt you can run the vue inspect (or vue inspect --mode production) command to see if that reports any errors. You can play with your vue.config.js file, perhaps removing all require(...) statements, or intentionally adding invalid ones, to see the effect.

Answer 2

You seem to be using old vue-cli and scaffolded your project using vue init webpack <project-name>.

Since it all evolved into vue cli 3, old vue-cli is deprecated and we are now using @vue/cli and vue create <project-name> for scaffolding out projects.

It's perfectly fine for you to use the old way(and I still do sometimes), and vue.config.js is the global configuration file for your project when you are using @vue/cli. Check more about it here.

For webpack configurations when using vue-cli and in projects scaffolded using npm init command, check the /build directory in the root of the project folder.

Answer 3

Look like that you created the 'restrace' project via the command.

vue init webpack restrace

Might you take a try to use the following command for creating your 'restrace' project?

vue create restrace

And then the vue.config.js file will be working.

Answer 4

The vue.config.js file is only used when using the vue-cli-service. If you are using Vue CLI 3 or higher, it should create a project without any visible webpack configuration. Instead, the vue-cli-service will look for a vue.config.js file to configure your build.

In your case you are using an older version. Your webpack configuration is inside the build folder, as hinted by your package.json. Your build folder should contain three files, namely webpack.base.conf.js, webpack.dev.conf.js and webpack.prod.conf.js. The base file is used for both environments. The dev file is used for your dev server (when you run npm run dev). The prod file is used for production (when you build your application using npm run build). Modify these files to get the behaviour you want.