webpack中配置Devserver

狍future

已于 2022-11-24 16:33:47 修改

阅读量962

点赞数 2

文章标签： webpack javascript vue.js

于 2022-11-24 16:29:24 首次发布

本文链接：https://blog.csdn.net/qq_51993543/article/details/128020824

版权

1.关于使用historyApiFallback

记录配置webpack整合vue-router中报错：来自“http://localhost:XXXXX..”的资源已被阻止，因为 MIME 类型不匹配（X-Content-Type-Options: nosniff）。[详细了解] index.html

此类型错误在许多配置webpack-devserver中都容易忽略，此次错误也是研究了一下官方文档得出的idea:因为devserver是本地静态服务器，所以在使用history时候并没有对应的路由映射文件，所以需要使用

historyApiFallback

并且将其设置为true,或者也可以使用如下图，进行配置

 devServer: {
    historyApiFallback: {
      rewrites: [
        { from: /^\/$/, to: '/views/landing.html' },
        { from: /^\/subpage/, to: '/views/subpage.html' },
        { from: /./, to: '/views/404.html' },
      ],
    },
  },

此外还需要将ouput出口文件的publicpath设置

 output: {
        path: path.resolve(__dirname, '../dist'), // 打包后的目录
        filename: '[name].[hash:8].js', // 打包后的文件名
        publicPath: '/'
    },

Devserver中的也需要设置，具体参考webpack官方文档，

  devServer: {
        // host: '127.0.0.1',
        open: true,
        port: 3000,
        hot: true,
        allowedHosts: 'all',
        // historyApiFallback: { //webpack-dev-sever是静态资源服务器，他会通过你的output配置去读取文件，
        //     //通过’/’分割以文件查找的模式匹配文件。这样自然就产生问题了，因为你配置的路由并不是实际存在的文件，根据文件查找的方式是找不到的
        //     rewrites: [{
        //         from: /.*/g,
        //         to: path.resolve(__dirname, '../dist/index.html')
        //     }]

        // },
        historyApiFallback: true,
        // static: path.join(__dirname, './dist'),
        static: {
            directory: path.resolve(__dirname, '../dist'),
            publicPath: '/' // 必须设置与output的相同，这样子才能保证devserver找到资源
        },



    },

此次内容基本结束，当然后续对此块内容理解更透彻了，也会修改，如果后面遇到配置Nginx找不到资源，大概率也是此处相同的问题，