How to add static JS file route in Vue-CLI web-server?

Question

I need to bypass a specific Javascript file from web-server that comes by default in vue-cli (Webpack Dev Server) such that I can open the js file directly from the browser.

It is for Firebase Messaging Service Worker and hence it needs to be in the root.

Eg. http://localhost:8080/firebase-messaging-sw.js

mirjan · Accepted Answer · 2018-06-04 11:26:55Z

1

In webpack.dev.conf.js add next code

require fs
add before hook to devServer conf.

example:

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
    });
},

And don`t forget copy the file in prod mode.

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

edited Jun 4, 2018 at 11:26

answered Jun 4, 2018 at 11:17

mirjan

113 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add static JS file route in Vue-CLI web-server?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related