Home Articles

如何在Vue-CLI Web服务器中添加静态JS文件路由?

Asked
Viewed 591 times
0

我需要绕过vue-cli(Webpack Dev Server)中默认出现的web-server的特定Javascript文件,以便我可以直接从浏览器打开js文件 .

它适用于Firebase Messaging Service Worker,因此它需要位于根目录中 .

例如 . http://localhost:8080/firebase-messaging-sw.js

1 Answer

  • 0

    在webpack.dev.conf.js中添加下一个代码

    • 需要fs
      在挂钩到devServer conf之前添加
    • .

    例:

    const fs = require('fs')
    const devWebpackConfig = merge(baseWebpackConfig, {
      module: {
        rules:rules
      },
      devtool: config.dev.devtool,
      devServer: {
        clientLogLevel: 'warning',
         before(app){
           app.get('/firebase-messaging-sw.js', function(req, res) {
              let content = fs.readFileSync(path.resolve(__dirname, '../src/firebase-messaging-sw.js'), 'utf-8')
              res.header("Content-Type", "text/javascript");
              res.send(content)
              return res
        });
    },
    

    不要忘记在prod模式下复制文件 .

    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../src/firebase-messaging-sw.js'),
        to: config.build.assetsRoot + '/firebase-messaging-sw.js'
      }
    ]),
    

Related