vue-cli2.0脚手架 移动端项目总结（环境构建、本地开发及线上部署）

​​移动端项目预览地址：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文件​​

2 线上​​nginx​​ 配置

2.1 ​​nginx安装、重启​​

2.2 ​​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​​)