Webpack webpack-dev-server + axios + php - как они работают?

Question

Я использую webpack-dev-server для запуска моего приложения Vue.

Конфигурация веб-пакета:

const merge = require('webpack-merge');
const common = require('./webpack.common.js')

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist'
  }
})

компонент vue:

let result = await axios({
    method: 'get',
    url: 'http://127.0.0.1/xxx/data.php'
})
console.log(result.data)

Когда я бегу:

$ npm run start

А мой сайт обслуживается по адресу http://localhost:8080

Но console.log(result.data) не возвращает данные, которые должны быть обработаны php-файлом, вместо этого он возвращает код php в тексте:

http://127.0.0.1/xxx/data.php
<?php
....
....
....

Есть идеи почему?

Примечания:

1. У меня уже работает php на LAMP, и я могу выполнить файл php на http://127.0.0.1/xxx/data.php и получить обработанные данные.

Answer 1

webpack использует js, а не php

вам все еще нужно использовать nodejs для компиляции ваших файлов, но если вы хотите обслуживать php-контент, вам нужно будет использовать php INSTEAD из nodejs

Answer 2

Оказывается, в коде нет ничего плохого, но именно webpack-dev-server вызывает проблему - он не «обновляет» браузер для обновленного кода, хотя это то, что он делает! Поэтому я должен очистить кеш браузера и обновить браузер вручную, чтобы получить результат. очевидно, это не надежный плагин!

Answer 3

Webpack не обрабатывает php-файлы, поскольку php-файл представляет собой только текстовый файл, для его обработки необходимо подключить локальный сервер, например Wamp, xamp, или использовать встроенный php-сервер.