@tipityx22

ОЧЕНЬ ПРОШУ, возникла ошибка — index.html:1 GET 127.0.0.1:5500/src/index.html 404 (Not Found) кто знает как решить?

Видел решения на разных форумах, но все равно не понимаю, что нужно делать, объясните пожалуйста.
Начал делать небольшой проект, возникла ошибка, сейчас постараюсь все расписать.
HTML:
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>title</title>
 </head>
 <body>
   
  <script type="module" src="app.js" ></script>
 </body>
</html>

Вот моя структура файлов:
60883f84313f0701439008.png
Основной файл app.js, модули apiConfig.js, apiservice.js и locations.js.
app.js:
import locations from './store/locations'; 
locations.Init().then(res => console.log(res));

apiConfig.js:
const config = {
    url: 'https://aviasales-api.herokuapp.com',
};
export default config;

apiService.js :
import axios from 'axios'; 
import config from '../config/apiConfig';
class Api {
    constructor(config) {
        this.url = config.url ;
    }
    async countries() {
        try {
            const response = await axios.get(`${this.url}/countries`)
            console.log(response);
        } catch (err) {
            console.log(err); 
            return Promise.reject(err); 
        }
    }
    async cities() {
        try {
            const response = await axios.get(`${this.url}/cities`)
            console.log(response);
        } catch (err) {
            console.log(err); 
            return Promise.reject(err); 
        }
    }
    async prices(params) {
    }
}
const api = new Api(config); 
export default api;

locations.js:
import api from '../service/apiService'; 
class Locations {
    constructor(api) {
        this.api = api;
        this.countries = countries; 
        this.cities = cities; 
    }
    async Init() {
        const response = await Promise.all([
            this.api.countries(), 
            this.api.cities()
        ])
        const [counties, cities] = response; 
        this.countries = counties; 
        this.cities = cities; 

        return response; 
    }
    getCitiesByCountryCode(code) {
        return this.cities.filter(city => city.county_code === code);
    }
}
const locations = new Locations(api);  
export default locations;

Вот webpack:
const path = require('path');
const autoprefixer = require('autoprefixer');
const precss = require('precss');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    polyfill: 'babel-polyfill',
    app: './app.js',
  },
  context: path.resolve(__dirname, 'src'),
  devServer: {
    publicPath: '/',
    port: 5500,
    contentBase: path.join(process.cwd(), 'dist'),
    host: '127.0.0.1',
    historyApiFallback: true,
    noInfo: false,
    stats: 'minimal',
    hot: true,
  },
  module: {
    rules: [
      {
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
        test: /\.js$/,
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',

            options: {
              importLoaders: 1,
              sourceMap: true,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [precss, autoprefixer],
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]',
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html',
    }),
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash].js',
  },
  mode: 'development',
};

В итоге возникает такая ошибка:
6088452e45420558071109.png
  • Вопрос задан
  • 136 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы