非你网

vue cli 配置 dev 的 host 和端口号

# vue.config.js  中

module.exports = {
  devServer: {
      port: 80, // 端口号，如果端口号被占用，会自动加1
      host: "sky.cn", //主机名， 127.0.0.1，  真机 0.0.0.0
      https: false, //协议
      open: true //启动服务时自动打开浏览器访问
  },

可是当： npm run dev 的时候，端口号却是 1024。 话说 mac 下启动 1024 以下的端口需要 root 权限。用 sudo 试试。

sudo npm run dev

当然，仅仅上边是不可以的。我们要修改 host，映射一下。

# mac 下
sudo vim /etc/hosts

# 增加
127.0.0.1 sky.cn

# windows 下
win + r -> drivers -> cd etc -> vim hosts

# 增加
127.0.0.1 sky.cn

这样，service 结果

  App running at:
  - Local:   http://sky.cn:80/
  - Network: http://sky.cn:80/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

优化

这个配置硬写在 vue.config.js 中。这样不好看。我们写在环境配置中。在 .env.development 中，新增配置：

# 配置 service 的域名
VUE_APP_HOST = 'sky.cn'

# 配置 service 的端口号
VUE_APP_PORT = '80'

然后，在 vue.config.js 中这样修改：

const host = process.env.host || process.env.VUE_APP_HOST || '127.0.0.1'
const port = process.env.port || process.env.VUE_APP_PORT || process.env.npm_config_port || 80

module.exports = {
  devServer: {
    host: host, //主机名， 127.0.0.1，  真机 0.0.0.0
    port: port, // 端口号，如果端口号被占用，会自动加1
    https: false, //协议
    open: true, //启动服务时自动打开浏览器访问
    overlay: {
      warnings: false,
      errors: true
    },
    before: ''
  },
  …

环境变量一说可以参考这里：https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F