时间戳

首页 > 解决方案 > 有人知道如何在 webpack-dev-server 或类似中代理 index.html 吗？

asp.net-mvc - 有人知道如何在 webpack-dev-server 或类似中代理 index.html 吗？

问题描述

我有 MVC 作为我的后端。MVC 控制器/视图有 _StartPage.cshtml、_Layout.cshtml（它们组合成 _index.cshtml）。

所以，我需要使用 webpack 开发服务器代理从后端服务器获取 index.html。有什么办法吗？

到目前为止，这就是我想出的

devServer: {
    historyApiFallback: true,
    index: '',
    contentBase: "./",
    port: 8000,
    proxy: [{
        //Only works for api, index.html does not  
        context: ['/index.html', '/api'],
        target: 'http://localhost',
        pathRewrite: { '^/api': '/TestApp/api' }
    }]
},

如果可以解决问题，我愿意使用除 webpack-dev-server 之外的任何其他客户端服务器吗？

请注意，这将仅用于开发而不是生产。

标签： asp.net-mvcwebpackwebpack-dev-server

解决方案

你的项目结构如何？

webpack-dev-server 必须在开发模式下使用，构建和部署后，您需要更改生产模式的 api url。

我是前端，遇到了类似的问题，我通过DefinePlugin解决了它，它可以在不同的模式下更改 api。

我的 webpack 是这样的：

├webpack.common.js
├webpack.dev.js
├webpack.prod.js

webpack.common.js

devServer: { 
    // contentBase: 'dist/', 
    historyApiFallback: true,
    watchOptions: { aggregateTimeout: 300, poll: 1000 },
    headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
        "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
    },
    proxy: {
        '/': {
            target: 'xxxxxxxxxxxx/website/',//url
            changeOrigin: true,
            secure: false,
        }
    }
},

webpack.dev.js

plugins:[
    new webpack.DefinePlugin({
        'SERVICE_URL': JSON.stringify('')
    })
]

webpack.prod.js

plugins:[
    new webpack.DefinePlugin({
        'SERVICE_URL': JSON.stringify('https://xxx.api.com/') //real api
    })
]

获取/ajax代码

console.log(SERVICE_URL)
$.ajax({
    url: SERVICE_URL+'api/%E6%AD%A6%E6%BC%A2%E8%82%BA%E7%82%8E_%E5%8F%B0%E5%95%86_simple.json',

  ...

这是我的解决方案，希望能给大家一些启发。

推荐阅读