Запустите Webpack + Vue на локальном виртуальном сервере

Question

Operating System: Mac OSX High Sierra
Node Version: v10.15.0
NPM Version: 6.13.6
webpack Version:
webpack-dev-server Version:
Browser: Chrome

мой виртуальный сервер http://lab.local это указывает на xampp / htdocs / lab

у меня есть проект в xampp / htdocs / lab / vue /

когда я пытался запустить npm запустить dev, это мой журнал

    test-vue-project@1.0.0 dev /Applications/XAMPP/xamppfiles/htdocs/lab/vue/
    cross-env NODE_ENV=development webpack-dev-server --open --hot

{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
Hash: 263046f8f5530a383160
Version: webpack 3.12.0
Time: 2140ms
Asset Size Chunks Chunk Names
build.js 1.9 MB 0 [emitted] [big] main
[1] (webpack)/hot/log.js 1.04 kB {0} [built]
[4] (webpack)/hot/emitter.js 77 bytes {0} [built]
[5] ./node_modules/vue/dist/vue.esm.js 326 kB {0} [built]
[9] multi (webpack)-dev-server/client?http://lab.local:80 webpack/hot/dev-server ./src/main.js 52 bytes {0} [built]
[10] (webpack)-dev-server/client?http://lab.local:80 7.93 kB {0} [built]
[11] ./node_modules/url/url.js 23.3 kB {0} [built]
[18] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[20] ./node_modules/loglevel/lib/loglevel.js 8.56 kB {0} [built]
[21] (webpack)-dev-server/client/socket.js 1.08 kB {0} [built]
[23] (webpack)-dev-server/client/overlay.js 3.67 kB {0} [built]
[28] (webpack)/hot nonrecursive ^./log$ 170 bytes {0} [built]
[30] (webpack)/hot/dev-server.js 1.61 kB {0} [built]
[31] (webpack)/hot/log-apply-result.js 1.31 kB {0} [built]
[32] ./src/main.js 134 bytes {0} [built]
[35] ./src/App.vue 1.81 kB {0} [built]
+ 27 hidden modules
webpack: Compiled successfully.
events.js:167
throw er; // Unhandled 'error' event
^

Error: listen EACCES: permission denied 127.0.0.1:80
at Server.setupListenHandle [as _listen2] (net.js:1273:19)
at listenInCluster (net.js:1338:12)
at GetAddrInfoReqWrap.doListen [as callback] (net.js:1471:7)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:62:10)
Emitted 'error' event at:
at emitErrorNT (net.js:1317:8)
at process._tickCallback (internal/process/next_tick.js:63:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test-vue-project@1.0.0 dev: cross-env NODE_ENV=development webpack-dev-server --open --hot
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the test-vue-project@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
My-iMac:lesson22 my-user $ npm run dev

У меня есть это в webpack.config. js

devServer: {
        contentBase: 'dist',
        host: 'lab.local',
        port: 80,
        overlay:{
            warnings: true,
            errors: true
        },
        proxy: {
            '/vue': {
                target: 'http://lab.local',
                pathRewrite: {'^/vue/' : ''}
            }
        },
    },

любая помощь?

как я могу настроить webpack на моем локальном хосте (виртуальный сервер http://lab.local) для работы?

я хочу выполнить npm запустить сборку и npm запустить dev, и это позволит браузеру показывать http://lab.local/vue/ необязательно (порт: 8080)

Answer 1

1. Откройте файл /Applications/XAMPP/xamppfiles/etc/httpd.conf в любом редакторе и найдите следующие строки.

# Virtual hosts
# Include /Applications/XAMPP/etc/extra/httpd-vhosts.conf

Удалите # из второй строки, чтобы включить виртуальный хост

Откройте файл /Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf, удалите все и напишите код ниже.

<VirtualHost *:8080>    
  ServerName myweb.site
  ServerAlias myweb.site
  <Location />
    ProxyPass "/" "http://localhost:3000/"
    ProxyPassReverse "/" "http://localhost:3000/"
  </Location>
</VirtualHost>

Откройте /etc/hosts и добавьте 127.0.0.1 myweb.site в конец Перезагрузите Apache Сервер с панели управления XAMPP

myweb.site должны быть одинаковыми в обоих файлах , это будет ваш URL для вашего Vue приложения, а http://localhost:3000 - это URL вашего приложения, порт должен совпадать с портом вашего сервера разработки

Откройте любой браузер и введите http://localhost:8080 или http://myweb.site