Javascript Phoenix 1.4服务器正在交付默认HTML,而不是请求的JS文件
我正在尝试直接在Phoenix 1.4应用程序中呈现Vue.js。但安装Vue路由器后发生以下错误: 拒绝从“”执行脚本 因为它的MIME类型('text/html')是不可执行的,并且是严格的MIME 类型检查已启用 我的Phoenix router.ex文件如下所示:Javascript Phoenix 1.4服务器正在交付默认HTML,而不是请求的JS文件,javascript,vue.js,webpack,phoenix-framework,vue-router,Javascript,Vue.js,Webpack,Phoenix Framework,Vue Router,我正在尝试直接在Phoenix 1.4应用程序中呈现Vue.js。但安装Vue路由器后发生以下错误: 拒绝从“”执行脚本 因为它的MIME类型('text/html')是不可执行的,并且是严格的MIME 类型检查已启用 我的Phoenix router.ex文件如下所示: scope "/", Web do pipe_through :browser get "/*path", PageController, :index end My webpack.config.js: const p
scope "/", Web do
pipe_through :browser
get "/*path", PageController, :index
end
My 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开发工具网络选项卡中看到,此请求的响应是app.html.eex文件
凤凰框架
非常感谢您的帮助。如果您使用通配符捕获所有路径来显示索引页,并且对资源的请求正在点击该路径,这意味着
Plug.Static
未在endpoint.ex
中正确设置
我们的看起来像这样:
plug Plug.Static,
at: "/", from: :my_app_name, gzip: true,
only: ~w(css images js favicon.ico robots.txt fonts)
在插入MyApp.Router之前,请将其放在任何位置
另一个原因可能是0.app.js
在priv/static/js
中根本不存在。检查它是否真正被称为app.js
,或者它的名字后面是否附加了一个哈希
plug Plug.Static,
at: "/", from: :my_app_name, gzip: true,
only: ~w(css images js favicon.ico robots.txt fonts)