在我npm run build
生成Dist文件,我将运行index.html
,所有资源文件都无法加载:
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (main.1f51eed1059b282ae3ed.css, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (main.1f51eed1059b282ae3ed.js, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (vendors.1f51eed1059b282ae3ed.js, line 0)
[Error] Did not load script at 'http://localhost:63342/dist/vendors.1f51eed1059b282ae3ed.js' because non script MIME types are not allowed when 'X-Content-Type: nosniff' is given.
[Error] Did not load script at 'http://localhost:63342/dist/main.1f51eed1059b282ae3ed.js' because non script MIME types are not allowed when 'X-Content-Type: nosniff' is given.
我的区档案:
我的webpack.base.config.js
:
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
main: './src/main',
vendors: './src/vendors'
},
output: {
path: path.join(__dirname, './dist')
},
module: {
rules: [
{
test: /.vue$/,
use: [{
loader: 'vue-loader',
options: {
loaders: {
less: ExtractTextPlugin.extract({
use: ['css-loader?minimize', 'autoprefixer-loader', 'less-loader'],
fallback: 'vue-style-loader'
}),
css: ExtractTextPlugin.extract({
use: ['css-loader', 'autoprefixer-loader', 'less-loader'],
fallback: 'vue-style-loader'
})
}
}
},
{
loader: 'iview-loader',
options: {
prefix: false
}
}
]
},
{
test: /iview\/.*?js$/,
loader: 'babel-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: ['css-loader?minimize', 'autoprefixer-loader'],
fallback: 'style-loader'
})
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
{
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
loader: 'url-loader?limit=1024'
},
{
test: /\.(html|tpl)$/,
loader: 'html-loader'
}
]
},
resolve: {
extensions: ['.js', '.vue'],
alias: {
'vue': 'vue/dist/vue.esm.js',
'@': path.resolve('src')
}
}
};
我的webpack.prod.config.js
:
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.config.js');
const fs = require('fs');
fs.open('./src/config/env.js', 'w', function (err, fd) {
const buf = 'export default "production";';
fs.write(fd, buf, 0, buf.length, 0, function (err, written, buffer) {
});
});
module.exports = merge(webpackBaseConfig, {
output: {
publicPath: '/dist/',
filename: '[name].[hash].js',
chunkFilename: '[name].[hash].chunk.js'
},
plugins: [
new ExtractTextPlugin({
filename: '[name].[hash].css',
allChunks: true
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors',
filename: 'vendors.[hash].js'
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new HtmlWebpackPlugin({
filename: './index.html',
template: './src/template/index.ejs',
inject: false
})
]
});
我不确定是否是由配置引起的,谁能告诉我在运行Dist时为什么不能加载Dist文件?index.html
在浏览器里?
浏览器中的url:
http://localhost:63342/wx_backup/dist/index.html?_ijt=gutju68tikagu6rldhshoenmrv
我也试过:
http://localhost:63342/wx_backup/dist/index.html
发布于 2018-08-06 13:20:47
文件夹的结构与URL不匹配。
在本例中,你应该能够使用以下url访问js包:
http://localhost:63342/wx_backup/dist/vendors.1f51eed1059b282ae3ed.js
你的index.html文件中的url缺少文件夹结构的一部分,因此找不到它。
这个问题可以在没有任何配置更改的情况下得到解决。这意味着你需要更改文件的文件夹结构。js包需要相对于index.html文件位于一个Dist文件夹中。如果你有以下文件夹结构,并在这里运行您的Web服务器,它将按预期工作。
index.html
dist
js bundles here
发布于 2018-08-06 14:35:22
我想你是通过vue-cli,你可能没有注意到在你完成之后有一条提示。NPM运行构建命令。
提示:构建的文件是在HTTP服务器上提供的。在文件:/上打开index.html是行不通的。
所以对于开发,只需要使用NPM运行开发或NPM运行启动调试和热重新加载。
至于生产版本,最好将Dist文件放到静态文件服务器上,如Nginx、Apach、IIS,甚至可以通过特快静态文件中间件。
https://stackoverflow.com/questions/-100008753
复制相似问题