为什么我的 vue.config.js 文件不起作用？答案

【问题标题】：Why is my vue.config.js file not working?为什么我的 vue.config.js 文件不起作用？
【发布时间】：2019-08-29 21:41:05
【问题描述】：

我想部署我的应用程序，为此我需要 vue.config.js 文件作为目标 URL。但是我放在这个文件中的所有东西（我必须自己创建）都不起作用。不是构建的 outputDir 或 devServer 中的代理。有没有人遇到同样的问题并得到修复？请帮帮我

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"
  ]
}

【问题讨论】：

好吧，当我到达该页面时，我希望看到提到的vue.config.js 文件。
对不起，我现在把它包括在内
你使用的是vue cli 3生成的vue项目吗？您的package.json 中的命令是否包含vue-cli-service？
不，我在 package.json 中找不到它
你能分享你的包json文件吗？

标签： vue.js

【解决方案1】：

您似乎在使用旧的 vue-cli 并使用 vue init webpack <project-name> 搭建您的项目。

由于它全部演变为 vue cli 3，旧的 vue-cli 已被弃用，我们现在使用 @vue/cli 和 vue create <project-name> 来搭建项目。

你可以使用旧方法（有时我仍然这样做），vue.config.js 是你的项目的全局配置文件当你正在使用@vue/cli .查看更多相关信息here。

对于使用 vue-cli 和使用 npm init 命令搭建的项目中的 webpack 配置，请检查项目文件夹根目录中的 /build 目录。

【讨论】：

【解决方案2】：

vue.config.js 文件仅在使用vue-cli-service 时使用。如果您使用的是 Vue CLI 3 或更高版本，它应该创建一个没有任何可见 webpack 配置的项目。相反，vue-cli-service 将查找 vue.config.js 文件来配置您的构建。

在您的情况下，您使用的是旧版本。正如您的 package.json 所暗示的，您的 webpack 配置位于 build 文件夹中。您的构建文件夹应包含三个文件，即webpack.base.conf.js、webpack.dev.conf.js 和webpack.prod.conf.js。基本文件用于两种环境。 dev 文件用于您的开发服务器（当您运行npm run dev 时）。 prod 文件用于生产（当您使用npm run build 构建应用程序时）。修改这些文件以获得您想要的行为。

【讨论】：

我现在使用 vue cli 服务创建了项目，并复制了我的 vue 文件。我让一切都再次运行，除了 vue.config.js 文件仍然无法正常工作。

【解决方案3】：

看起来您通过命令创建了“restrace”项目。

vue init webpack restrace

您可以尝试使用以下命令来创建您的“resttrace”项目吗？

vue create restrace

然后vue.config.js 文件就可以工作了。

【讨论】：

【解决方案4】：

这可能不是 OP 的问题，但万一其他人偶然发现这个 SO 问题...

在 Vue-CLI v.4.5.13（带有@vue/cli-service@4.3.1）中，如果您的@987654324 中存在无效的require(...)，则bug documented here 会导致静默失败 @。当有一个错误的require(...) 时，您的vue.config.js 文件将被完全忽略！

要执行健全性检查，您可以在命令提示符处运行vue inspect（或vue inspect --mode production）命令查看是否报告任何错误。您可以使用您的vue.config.js 文件，也许删除所有require(...) 语句，或者故意添加无效的语句，以查看效果。

【讨论】：