vue中$set的使用、vue-router使用history模式服务端配置、webpack中服务器代理的配置

2018-04-09

vue中只有在data中添加的属性，属性值发生改变，视图才会响应，后添加的属性，也要视图对其变化发生响应应该使用vue实例中的$set方法；

1	this.$set(target, key, value);

vue项目部署

使用路由的history模式的时候，会出现路由刷新404的情况，这时需要前后端配合处理才行，vue-router的相关配置如下
1
2
3
4
export default new Router({
mode: 'history',
base: '/hot/', //加上这一行,hot即部署在服务器上的文件夹名称
})

服务端也需要对服务器配置做出相应处理(nginx配置如下)

location /hot { 


# 此处root为hot的上级目录


root /data/nginx/wwwroot/; 


index index.html index.htm;


if (!-e $request_filename) {


rewrite ^/(.*) /hot/index.html last;


break;

location /hot { 


# 此处root为hot的上级目录


root /data/nginx/wwwroot/; 


index index.html index.htm;


if (!-e $request_filename) {


rewrite ^/(.*) /hot/index.html last;


break;


}


#也可以用try_files


#try_files $uri $uri/ /hot/index.html;

}

2.关于接口处理和资源引入路径问题
接口处理

//代理配置，在webpack中config中配置请求接口时将完整接口地址拼接上即可 如www.abc.com/api/user/isLogin ,请求是地址为user/isLogin;
proxyTable: {
      "/api": {
        target: 'www.abc.com/api/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
// 引入路径问题，将webpack的config文件中assetsPublicPath的值修改为这个值即可，使用相对路径引入。
  assetsPublicPath: './',