时间戳

首页 > 解决方案 > Phoenix 1.4 服务器正在交付默认 HTML 而不是请求的 JS 文件

javascript - Phoenix 1.4 服务器正在交付默认 HTML 而不是请求的 JS 文件

问题描述

我正在尝试直接在我的 Phoenix 1.4 应用程序中渲染 Vue.js。但是安装Vue-router后出现如下错误：

拒绝执行来自“ http://localhost:4000/0.app.js ”的脚本，因为它的 MIME 类型 ('text/html') 不可执行，并且启用了严格的 MIME 类型检查。

我的 Phoenix router.ex 文件如下所示：

scope "/", Web do
 pipe_through :browser
 get "/*path", PageController, :index
end

我的 webpack.config.js：

const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = (env, options) => ({
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  entry: {
    './js/app.js': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, '../priv/static/js')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.s(c|a)ss$/,
        use: [
          'css-loader',
          {
            loader: 'sass-loader',
            // Requires sass-loader@^7.0.0
            options: {
              implementation: require('sass'),
              fiber: require('fibers'),
              indentedSyntax: true // optional
            }
          }
        ]
      },
      { test: /\.(png|woff|woff2|eot|ttf|svg)$/, use: 'url-loader' }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: '../css/app.css' }),
    new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
    new VueLoaderPlugin()
  ]
});

我目前看到（我认为）缓存清单存在问题，我的网站可以正确地交付 HTML 和 CSS 文件，但对于 JS 文件，正在交付默认的 HTML 模板 - 这会导致错误。

我可以在 Chrome 开发工具网络选项卡中看到，此请求http://localhost:4000/0.app.js的响应是 app.html.eex 文件。

在此处输入图像描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Phoenix Framework</title>
  </head>
  <body>
    <div id="vue-app"></div>
    <script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
  </body>
</html>

非常感谢任何帮助。

标签： javascriptvue.jswebpackphoenix-frameworkvue-router

解决方案

如果您使用通配符包罗万象的路由来显示您的索引页面，并且对资源的请求正在访问该路由，这意味着Plug.Static您的endpoint.ex.

我们的看起来像这样：

plug Plug.Static,
  at: "/", from: :my_app_name, gzip: true,
  only: ~w(css images js favicon.ico robots.txt fonts)

在你做之前把它放在任何地方plug MyApp.Router。

另一个原因可能是它0.app.js根本不存在于priv/static/js. 检查那里以查看它是否实际上未被调用app.js或是否在其名称后附加了一个散列。

推荐阅读