Vue常见使用中的问题

[bfchengnuo]

局域网、外网无法访问

开发中，直接使用 npm run 是非常常见的使用场景，但是这种情况默认只能本机访问，也是安全考虑；

不过有些情况，确实需要突破这个限制，解决方案：在项目的 Config 配置文件中，加入 host 属性，例如：

// vue.config.js
devServer: {
  // 将监听地址扩展为任意地址
  host:'0.0.0.0',
  // 关闭 webpack 的 host 白名单
  disableHostCheck: true,
}

本质其实是 Webpack 的功能。

[bfchengnuo]

样式问题

样式穿透和 calc 问题 参见：使用Vue时遇到的样式问题

[bfchengnuo]

Axios设置代理

大多数项目使用的是 Axios 来出来 Ajax 请求，但是难免遇到跨域问题，所以可以配置 Webpack 的转发功能来解决。

dev: {
  // Paths
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
    // 添加 URL 的替换，转发为本地静态文件
    '/api': {
      target: 'http://localhost:8080',
      secure: false,  // 如果是https接口，需要配置这个参数
      changeOrigin: true,  // 是否跨域
      pathRewrite: {
        '^/api': '/static/mock'
      }
    },
  }
}

参考： Vue核心使用总结 http-proxy-middleware