Run Webpack + Vue in a Local VirtualServer - vue.js

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
my virtual server is http://lab.local this point to xampp/htdocs/lab
i have the project in xampp/htdocs/lab/vue/
when i tried to run npm run dev, this is my log
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
i have this in webpack.config.js
devServer: {
contentBase: 'dist',
host: 'lab.local',
port: 80,
overlay:{
warnings: true,
errors: true
},
proxy: {
'/vue': {
target: 'http://lab.local',
pathRewrite: {'^/vue/' : ''}
}
},
},
any help ?
how i can configure webpack in my localhost (virtual server http://lab.local) for work ?
i want execute npm run build and npm run dev and this allow to browser show http://lab.local/vue/ optional (port: 8080)

Answer 1

Open /Applications/XAMPP/xamppfiles/etc/httpd.conf file in any editor and look for the following lines.
# Virtual hosts
# Include /Applications/XAMPP/etc/extra/httpd-vhosts.conf
Remove # from second line to enable virtual host
Open /Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf file, remove everything and write below code.
<VirtualHost *:8080>
ServerName myweb.site
ServerAlias myweb.site
<Location />
ProxyPass "/" "http://localhost:3000/"
ProxyPassReverse "/" "http://localhost:3000/"
</Location>
</VirtualHost>
Open /etc/hosts and add 127.0.0.1 myweb.site to bottom
Restart Apache Server from XAMPP Control Panel
myweb.site should be same in both file, this will be your URL for your Vue app and http://localhost:3000 is your app url, port should be same with port of your development server
Open any browser and enter http://localhost:8080 or http://myweb.site