如何在 Vue-CLI web-server 中添加静态 JS 文件路由？答案

【问题标题】：How to add static JS file route in Vue-CLI web-server?如何在 Vue-CLI web-server 中添加静态 JS 文件路由？
【发布时间】：2018-09-09 13:16:44
【问题描述】：

我需要绕过 vue-cli (Webpack Dev Server) 中默认提供的来自 web-server 的特定 Javascript 文件，以便我可以直接从浏览器打开 js 文件。

它适用于 Firebase 消息传递服务工作者，因此它需要位于根目录中。

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

【问题讨论】：

标签： webpack webpack-dev-server vue-cli

【解决方案1】：

在 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'
  }
]),

【讨论】：