Vue 接口联调以及打包上线

• 项目运行默认地址： http://localhost:8080/#/

---

• #### 接口联调

---

Path: config/index.js

本地静态数据：

proxyTable: {
  '/api': {
    target: 'http://localhost:8080',
    pathRewrite: {
      '^/api': '/static/mock'
    }
  }
}

本地服务器数据：

proxyTable: {
  '/api': {
    target: 'http://localhost:80'
  }
}

---

• #### 真机测试

---

获取到本机IP地址，例如 10.0.88.88，项目默认配置端口为 8080 那么我们应该访问的地址就是 10.0.88.88:8080 但是这个时候如果你没有配置过 package.json 那么 8080 端口应该不会对外开放的。那么我们需要这么修改 package.json：

原文件:

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
},

修改后的文件：

"scripts": {
    "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
},

然后重新运行

npm run dev

然后浏览器访问 10.0.88.88:8080 就可以打开网页了

---

• #### 测试问题

---

• 如果在部分低版本安卓机器上白屏

  第一种：

  可能是不支持 polyfill 那么我们需要添加

  npm install babel-polyfill --save

  babel-polyfill 这个第三方包会自动判断浏览器是否支持 polyfill， 如果不支持则会制动添加这些特性

  第二种：

  如果你安装了 babel-polyfill 还是没法得到解决，那可能就是你的 webpack 打包问题，你可以打包上线在测试服务器测试。

---

• #### 打包上线

---

如果你的代码是要放到服务器上根目录的一个指定文件夹下，那么你需要这么配置一下， 打开项目找到 config/index.js 文件，找到 build 选项，修改：

默认显示是 '/'，指的是服务器根目录：

assetsPublicPath: '/',

我们比如是放在根目录的 project 文件里面：

assetsPublicPath: '/project',

修改好之后我们保存关闭文件

cd 到项目目录，运行：

npm run build

这个时候打包工具会自动帮我们把src下的原代码进行打包编译，生成一个能被浏览器运行的代码，同时这个代码也是被压缩过后的代码。

Build complete.

Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.

出现 Build complete 就说明打包完成！

然后在打开我们的项目，项目里面就会多出一个 dist 的文件夹，这个文件夹里面的代码就是我们最终要上线的代码。你可以把这个文件代码给到后端的同学或者自己放到后端的服务器上。