Vue学习笔记-项目开发5.1项目前后端联调及打包

一、修改访问地址

       当前端页面开发完成后，需要跟后端做联调的时候 就需要将target的值改成真实环境中的IP地址和端口。 下面的pathRewrite可以去掉 就直接/api对 XXX:XXX/api
项目目录下的config/index.js

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

二、访问IP权限修改

       目前用localhost访问是没问题的 但是如果用IP就会拒绝 因为我们是使用webpackage来管理我们的项目 默认情况下他是不允许用IP访问 所以需要修改下配置文件
       项目目录下的package.json，重启服务即可

"dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",

三、真机调试问题修复

       1、城市列表的字母滑动在真正手机上使用的时候会发现右边的字母表（Alphabet.vue）是无法使用的，所以需要去做个优化。 进入Alphabet.vue，在原来的touchstart后边增加prevent即可

@touchstart.prevent="handleTouchStart"

       2、 兼容一些旧的操作系统或浏览器出现白屏的问题
安装babel-polyfill

npm install babel-polyfill --save

在入口文件main.js引入

//main.js
import 'babel-polyfill'

       3、如果还是有人打开页面白屏的话 那就应该是本地运行环境的问题。打包后在服务器上部署上线之后就能解决。

三A、打包

       1、运行npm run build，即可生成打包后的文件，文件夹名为dist，如下图

npm run build

       2、后端程序使用
            ①将这两个目录给后端程序，但必须要放在根目录下，也就是说 XXX:80/ 这个根目录
            ②如果不想采用第一种方式，单独建一个目录然后给访问那就需要去修改下vue程序的访问 根目录下config/index.js
            原访问80地址的assetsPublicPath: ‘/’
            可修改为assetsPublicPath: ‘/目录名’

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
	// 目录名
    assetsPublicPath: '/XXX',
    // assetsPublicPath: '/',
    /**
     * Source Maps

然后重新打包 然后重新给后端程序，就可以访问就是XXX/XXX了