开发和生产中API调用的错误路径

如何解决开发和生产中API调用的错误路径

我有一个使用Vuejs开发的项目，该项目执行对API的调用。 我当时使用babel.config.js来操作该编译，并且在开发模式下运行良好，但是当我将其投入生产时，它返回一个空白页，因此我决定使用webpack来处理编译。

在这里和其他地方，我尝试了很多解决方案，但是没有任何效果，或者某些解决方案给了我与同一问题相关的其他错误。 在开发过程中，该接口已加载，但是当我选择一个连接到API的选项时，就会向该请求发出请求，例如 http：// localhost：port / undefined / masatipo / getall 代替 http：// server_host：server_port / masatipo / getall 。 未定义字段应该是在 .env 文件和 .env.production 中都定义的API base_uri（ip：port / api）。我认为.env文件未正确加载。

另一方面，当我编译生成并打开index.html时，它将重定向到我的根本地目录'/'。

package.json （与build2相同的结果）

{
  "name": "elparron-frontend","version": "0.1.0","private": true,"scripts": {
    "start": "webpack-dev-server --open --config webpack.dev.js --env","build": "webpack --config webpack.prod.js","build2": "NODE_ENV=production webpack -p --config webpack.prod.js --env.production"
  },"dependencies": {
    "core-js": "^3.6.5","vue": "^2.6.11","vue-router": "^3.2.0","vuex": "^3.4.0"
  },"devDependencies": {
    "@babel/core": "^7.11.1","@babel/plugin-proposal-class-properties": "^7.10.4","@babel/plugin-proposal-decorators": "^7.10.5","@babel/plugin-proposal-json-strings": "^7.10.4","@babel/plugin-proposal-object-rest-spread": "^7.11.0","@babel/plugin-syntax-dynamic-import": "^7.8.3","@babel/plugin-syntax-import-meta": "^7.10.4","@babel/polyfill": "^7.10.4","@babel/preset-env": "^7.11.0","@babel/preset-stage-0": "^7.8.3","@vue/cli-plugin-babel": "~4.5.0","@vue/cli-plugin-router": "~4.5.0","@vue/cli-plugin-unit-jest": "~4.5.0","@vue/cli-plugin-vuex": "~4.5.0","@vue/cli-service": "~4.5.0","@vue/test-utils": "^1.0.3","axios": "^0.19.2","babel-loader": "^8.1.0","babel-minify-webpack-plugin": "^0.3.1","clean-webpack-plugin": "^3.0.0","compression-webpack-plugin": "^4.0.0","cross-env": "^7.0.2","css-loader": "^4.2.1","file-loader": "^6.0.0","friendly-errors-webpack-plugin": "^1.7.0","html-webpack-plugin": "^4.3.0","node-sass": "^4.14.1","optimize-css-assets-webpack-plugin": "^5.0.3","regenerator-runtime": "^0.13.7","sass-loader": "^8.0.2","style-loader": "^1.2.1","uglifyjs-webpack-plugin": "^2.2.0","url-loader": "^4.1.0","vue-loader": "^15.9.3","vue-style-loader": "^4.1.2","vue-template-compiler": "^2.6.11","webpack": "^4.44.1","webpack-bundle-analyzer": "^3.8.0","webpack-cli": "^3.3.12","webpack-dev-server": "^3.11.0","webpack-hot-middleware": "^2.25.0","webpack-merge": "^5.1.1"
  }
}

.env

API=ip:port/api

.env.production

API=ip:port/api

webpack.common.js

const {webpack}              = require('webpack');
const VueLoaderPlugin        = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin      = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path                   = require('path');
module.exports = {
    entry: {
        app: ['@babel/polyfill','./src/main.js'],},output: {
      path: path.resolve(__dirname,'dist'),filename: 'bundle.js'
    },devtool: 'source-map',module: {
        rules: [
            {
                test: /\.vue$/,loader: 'vue-loader',options: {
                    esModule: false
                  }
            },{
                test: /\.js$/,exclude: /node_modules/,use: {
                    loader: 'babel-loader',options: {
                        presets: ['@babel/preset-env'],plugins: ['@babel/plugin-proposal-object-rest-spread']
                    },}
            },{
                test: /\.css$/i,use: ['style-loader','css-loader'],{
                test: /\.s[ac]ss$/i,use: [
                'style-loader',{
                    loader: 'css-loader',options: {
                    sourceMap: true,{
                    loader: 'sass-loader',],{
                test: /\.(jpg|png|svg)$/,use: {
                    loader: 'url-loader',options: {
                        limit: 25000,esModule: false
                    }
                }
            }
        ]
    },plugins: [
        new VueLoaderPlugin(),new CleanWebpackPlugin(),new HtmlWebpackPlugin({
           template: './public/index.html'
        }),]
};

webpack.dev.js

const webpack  = require('webpack');
const { merge } = require('webpack-merge');
const common    = require('./webpack.common.js');
module.exports = merge(common,{
  mode: 'development',devServer: {
    hot: true,watchOptions: {
            poll: true,});

webpack.prod.js

const { merge } = require('webpack-merge');
const common    = require('./webpack.common.js');
const webpack   = require('webpack');
const MinifyPlugin = require("babel-minify-webpack-plugin");

module.exports  = merge(common,{
  mode: 'production',plugins: [
      new MinifyPlugin({},{
          exclude: './node_modules/'
      }),]
});

我正试图了解有关webpack的所有内容，因此，如果您能向我解释解决方案，我将不胜感激。

提前谢谢！