module.exports = {
publicPath: './',
assetsDir: 'static',
productionSourceMap: false,
devServer: {
proxy: {
'/api':{
target:'http://127.0.0.1:5000',
changeOrigin:true,
pathRewrite:{
'/api':'api'
}
}
}
}
}
がwebpack-dev-server（以下、wdsという）を使って開発を行ったとき、wdsはnodeで実行されているウェブサーバを起動しました。このとき、環境が対応するポートにアクセスする場合（8080で例を挙げる）、ブラウザから戻ってきたvueページはwds処理後の結果です。クロスドメイン。簡単に言えば、ajaxを使って現在のページとは異なるソースのデータを要求する場合、ブラウザはサーバからの応答をブロックします。開発環境において、「現在のソース」とはhttp://127.0.0.1:8080任意の他のアドレスまたはポートに対する要求は、ドメインをまたぐものと見なされ、ブラウザによってブロックされる。 devServerのproxyは、開発環境下のドメイン横断要求配置を簡略化するためである。上記の状況で、ブロックされているのは「他のソース」への要求であり、「現在のソース」への送信はブロックされません。ここの「現在のソース」は開発サーバであるwdsです。wdsの考えは、これに基づいて、devServer proxyに配置された要求フォーマットに適合していることを発見した場合、その要求をブロックし、自分でサーバに応答を要求して、その応答をフロントページに返す、つまりマイクに相当する。パッケージをコンパイルした後、フロントエンドページは単独の静的リソースとなり、wdsは抜き出されました。しかし、リソースがアクセスされるには、他のウェブサーバが必要です。このサーバーでよく見られるのはinxです。だから、オンラインのvueページでも正常にサーバにアクセスできるようにするには、nginxを設定して、同じことを教えます。