vuejs 中缺少 webpack 配置

Question

My vuejs app's package.json looks like我的 vuejs 应用程序的 package.json 看起来像

package.json

{
  "name": "vue_app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "vue": "^2.5.13",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.0-beta.6",
    "@vue/cli-plugin-eslint": "^3.0.0-beta.6",
    "@vue/cli-service": "^3.0.0-beta.6",
    "@vue/eslint-config-standard": "^3.0.0-beta.6",
    "lint-staged": "^6.0.0",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "vue-template-compiler": "^2.5.13"
  },
  "babel": {
    "presets": [
      "@vue/app"
    ]
  },
  "eslintConfig": {
    "root": true,
    "extends": [
      "plugin:vue/essential",
      "@vue/standard"
    ]
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.js": [
      "vue-cli-service lint",
      "git add"
    ],
    "*.vue": [
      "vue-cli-service lint",
      "git add"
    ]
  }
}

Upon building the vue app, it generates an index.html file while looks like,在构建 vue 应用程序时，它会生成一个 index.html 文件，看起来像，

dist/index.html

<body>
    <noscript><strong>We're sorry but vue_app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
    <div
        id=app></div>
        <script type=text/javascript>
            (function(r){var n=window["webpackJsonp"];window["webpackJsonp"]=function(e,u,c){for(var i,f,p,l=0,a=[];l<e.length;l++)f=e[l],t[f]&&a.push(t[f][0]),t[f]=0;for(i in u)Object.prototype.hasOwnProperty.call(u,i)&&(r[i]=u[i]);n&&n(e,u,c);while(a.length)a.shift()();if(c)for(l=0;l<c.length;l++)p=o(o.s=c[l]);return p};var e={},t={2:0};function o(n){if(e[n])return e[n].exports;var t=e[n]={i:n,l:!1,exports:{}};return r[n].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.m=r,o.c=e,o.d=function(r,n,e){o.o(r,n)||Object.defineProperty(r,n,{configurable:!1,enumerable:!0,get:e})},o.n=function(r){var n=r&&r.__esModule?function(){return r["default"]}:function(){return r};return o.d(n,"a",n),n},o.o=function(r,n){return Object.prototype.hasOwnProperty.call(r,n)},o.p="/",o.oe=function(r){throw console.error(r),r}})([]);
//# sourceMappingURL=/js/manifest.bb41d6d8.js.map
        </script>
        <script type=text/javascript src=/js/vendor.be88a6a7.js></script>
        <script type=text/javascript src=/js/app.5edcb6c7.js></script>
</body>

index.html

<!DOCTYPE html>
<html>
  <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="<%= webpackConfig.output.publicPath %>favicon.ico">
    <title>Flask + Vue.js Template</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vue_app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

On running static files are failed to get fetched , ie.在运行时无法获取静态文件，即。 /js/vendor.be88a6a7.js returns 404 but it can be fetched by calling /static/js/vendor.be88a6a7.js url. /js/vendor.be88a6a7.js返回 404，但可以通过调用/static/js/vendor.be88a6a7.js url 来获取。 So I have to prepend /static to all the static url paths.所以我必须在所有静态 url 路径前加上/static 。 But I don't find any webpack.conf file located on that directory.但我没有在该目录中找到任何 webpack.conf 文件。

source code 源代码

Answer 1

In vue cli 3 the webpack config file is generated dynamically at runtime.在 vue cli 3 中，webpack 配置文件在运行时动态生成。 It has been abstracted away.它已经被抽象掉了。 That is the reason you don't see a webpack config file.这就是您看不到 webpack 配置文件的原因。

You can find the webpack config file here:你可以在这里找到 webpack 配置文件：

<projectRoot>/node_modules/@vue/cli-service/webpack.config.js

This is the file that is dynamically resolved.这是动态解析的文件。

The output.publiPath is / by default in the webpack config file.该output.publiPath是/默认情况下，的WebPack配置文件。 If you want to check want is webpack config file looks like you can use vue inspect command in your command line or via vue ui -> click Tasks -> click inspect.如果您想检查 webpack 配置文件是否看起来像您可以在命令行中使用vue inspect命令或通过vue ui -> 单击任务 -> 单击检查。 It prints out a serialized format only meant for inspection of the config file.它打印出仅用于检查配置文件的序列化格式。

But if you want to configure the webpack config you can make use of the vue.config.js file.但是如果你想配置 webpack 配置，你可以使用vue.config.js文件。

If you do not have vue.config.js file, then create it in root of your project.如果您没有vue.config.js文件，请在项目的根目录中创建它。

Then add the following:然后添加以下内容：

// vue.config.js
module.exports = {
    configureWebpack: {
        output: {
            publicPath: '/static/'
        }
    }
}

Resources:资源：

Vue-Cli 3 docs Vue-Cli 3 文档
Configuring Webpack 配置 Webpack

vuejs 中缺少 webpack 配置

问题描述

1 个解决方案

解决方案1
31 已采纳 2018-05-12 09:15:00

vuejs 中缺少 webpack 配置

问题描述

1 个解决方案

解决方案1 31 已采纳 2018-05-12 09:15:00

解决方案1
31 已采纳 2018-05-12 09:15:00