Vue脚手架 移动端项目总结

移动端项目预览地址：http://47.106.166.17:5200/

一、项目构建

1. 全局安装 vue-cli

npm install –global vue-cli

2. 创建一个基于 webpack 模板的新项目

vue init webpack my-project

3. 安装依赖，走你

cd my-project
npm install

4. 运作

npm run dev

二、项目本地开发

1. 接口代理

• 配置修改 config/index.js

proxyTable: {
    '/apis': {
        target: 'http://www.***.com/',//代理接口域名
      //secure: false,  // 如果是https接口，需要配置这个参数
        changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
        pathRewrite: {
            '^/apis': ''
        }
    }
}

• 实例

/data3/fast/login ---> /apis/data3/fast/login

2. 引用jquery

• 配置修改 build/webpack.base.conf.js

module.exports = {
 plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]
}

• 引入 src/main.js

import $ from 'jquery'

3. 后端交互数据插件

3.1 vue-resource

• 安装 vue-resource

npm install vue-resource

• 引入vue-resource

import VueResource from 'vue-resource';
Vue.use(VueResource);

3.2 axios

• vue-resource 替换为 axios

  原因： vuejs2.0已经不在维护vue-resource了，vuejs2.0 已经使用了axios了

• 安装 axios

npm install axios

• 引入axios

import axios from 'axios'
Object.defineProperty(Vue.prototype, '$http', {
    value: axios
})

3.3 替换时注意 ：

• axios 与 vue-resource请求 ,返回数据层不同

#axios
this.$http.post('/apis/data/base/count').then(res => {
   this.items = res.data.data;## 区别
}, res => {
   console.info('调用失败');
});
#vue-resource
this.$http.post('/apis/data/base/count').then(res => {
   this.items = res.data; ## 区别
}, res => {
   console.info('调用失败');
});

• axios 不支持 跨域jsonp请求 ，解决办法 如下

#安装
npm install jsonp
#引入
import jsonp from 'jsonp'
Vue.prototype.jsonp = jsonp
#实例
this.jsonp('http://api.map.baidu.com/location/ip?ak=yZSTYLk9UUvs0ZqXqBbtTp8ViKk5vxLM', null, (err, res) => {
   ...
});

三、线上部署

注：阿里云服务器无需comcat，但要添加防火墙规则，以防端口被禁止访问

1. 部署打包

1.1 打包命令

npm run build  

1.2 部署包 根目录下dist文件

1.3 线上nginx 配置

• nginx安装、重启
• nginx 配置修改 nginx/conf/nginx.conf

server {
     listen       端口;
     server_name  访问域名;

     location / {
         root   线上静态路径; //示例 /root/lc/dist #注意：用‘/’
         index  index.html index.htm;
         try_files $uri $uri/ /index.html;  //解决子页面适配，刷新404问题
     }

     location /apis {
        proxy_pass http://www.***.com/; //代理接口域名
     }
}

• 重启nginx即可

四、标签页图标favicon报错问题

1.修改配置 build/webpack.dev.conf.js

var path = require('path')
module.exports = merge(baseWebpackConfig, {
 plugins: [ 
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: 'index.html',
       inject: true,
       favicon: path.resolve('favicon.ico') // 增加
     }),
  ]
})

2.favicon.ico 存放根目录

3.index.html引入路径

<link rel="icon" href="/favicon.ico">

五、总结注意

1.vue-resource 替换为 axios，以及跨域安装jsonp
2.nginx路径配置
3.阿里云防火墙端口限制
4.标签页图标favicon报错问题
5.子页面刷新404问题( 见上nginx 配置try_files)