运行本地虚拟服务器中的 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 运行开发时，这是我的日志

    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/' : ''}
            }
        },
    },

有帮助吗？

如何在我的本地主机（虚拟服务器 http://lab.local）中配置 webpack 以供工作？

我想执行 npm 运行 build 和 npm 运行 dev 这允许浏览器显示 http://lab.local/vue/ 可选（端口：8080）

Answer 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
从 XAMPP 控制面板

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

打开任意浏览器并输入http://localhost:8080或http://myweb.site

运行本地虚拟服务器中的 Webpack + Vue

Run Webpack + Vue in a Local VirtualServer

vue.js

webpack

devserver

运行 本地虚拟服务器中的 Webpack + Vue

Run Webpack + Vue in a Local VirtualServer

vue.js

webpack

devserver

运行本地虚拟服务器中的 Webpack + Vue