web-dev-qa-db-ja.com

vuejsにwebpack設定がありません

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

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>

実行時に静的ファイルが取得されない、つまり。 /js/vendor.be88a6a7.jsは404を返しますが、/static/js/vendor.be88a6a7.js urlを呼び出すことでフェッチできます。したがって、すべての静的URLパスの前に/staticを付加する必要があります。しかし、そのディレクトリにwebpack.confファイルが見つかりません。

ソースコード

javascriptwebpackvue.js
9
Avinash Raj

vue cli 3では、webpack構成ファイルは実行時に動的に生成されます。これは抽象化されています。そのため、webpack構成ファイルは表示されません。

ここにwebpack設定ファイルがあります：

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

これは動的に解決されるファイルです。

output.publiPathは/デフォルトでは、webpack設定ファイルにあります。確認したい場合は、webpack設定ファイルがvue inspectコマンドラインまたはvue ui->タスクをクリック->検査をクリック。構成ファイルの検査のみを目的としたシリアル化された形式で出力します。

ただし、webpack構成を構成する場合は、vue.config.jsファイル。

ない場合vue.config.jsファイルを作成し、プロジェクトのルートに作成します。

次に、以下を追加します。

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

リソース：

17
Vamsi Krishna