Question

我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.

我的dist文件：

我的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 index.html时无法加载dist文件？

浏览器中的网址：

http://localhost:63342/wx_backup/dist/index.html?_ijt=gutju68tikagu6rldhshoenmrv

我也尝试过：

http://localhost:63342/wx_backup/dist/index.html

Answer 1

我猜你是通过 vue-cli 创建了这个项目的，你可能没有注意到在完成 npm run build 命令后有一个提示。

提示：构建的文件应通过HTTP服务器提供。打开index.html over file：//无法工作。

因此，对于开发，只需使用 npm run dev 或 npm run start 进行调试和热重新加载。

对于生产版本，您最好将dist文件放入静态文件服务器，如Nginx，Apach，IIS，甚至通过 express 静态文件中间件托管。

Answer 2

根据您发布的配置，我假设您使用的是vuejs-template/webpack模板，您可以配置以下内容以在浏览器中运行index.html。我仍然建议使用HTTP服务器而不是在本地打开index.html。

config.js

build: {
  // other default code

  assetsPublicPath: ''
}

routes.js

export default new Router({
  base: window.location.pathname
  // your other code here
})

Firefox和Safari将与mode: 'history'一起使用。要使其在Chrome上运行，只需删除历史记录模式。

Answer 3

我遇到了完全相同的问题。通过将Flask服务器指向如下所示的分发文件夹，我能够解决此问题：

app = Flask(__name__,template_folder="./dist/",static_folder="./dist/static")

不同类型的服务器可以具有自己的目录结构要求。例如，Flask Server在 Templates 文件夹中查找 index.html 文件，并在 Static 文件夹下查找所有静态资产，并期望使用以下目录默认结构：

static/
     js/
        bundle.js
     css/
templates/
        index.html
server.py

但是，在我的情况下，结构为：

dist/
   index.html
   static/
         js/
            bundle.js
         css/ 
src/
build/
server.py

我希望有帮助。

Answer 4

文件夹的结构与网址不匹配。

在这种情况下，您应该能够使用以下网址访问js包：

http://localhost:63342/wx_backup/dist/vendors.1f51eed1059b282ae3ed.js

index.html文件中的url缺少文件夹结构的一部分，因此无法找到它。

无需任何配置更改即可解决问题。它只是意味着您需要更改文件的文件夹结构。 js包需要位于相对于index.html文件的dist文件夹中。如果您具有以下文件夹结构并在此处运行您的网络服务器，则它会按预期工作。

index.html
dist
    js bundles here

Answer 5

就我而言，我在index.html中更新了“ 基本”元素href =“ ./”，然后问题得以解决

我在浏览器中运行`index.html`时无法加载dist文件

5 个答案:

config.js

routes.js