vue构建项目常见问题

1.vue安装node-moudle报node-sass安装失败

解决方法：
1.npm uninstall node-sass
2.npm install node-sass --registry=https://registry.npm.taobao.org

2.前端工程自动化：利用vue-cli搭建项目，路由模块，vuex的store维护等都需要添加大量的module去单独维护，为了将单个module暴露出去，避免重复的import,export语法，使用工程自动化可以简化工作流程，避免重复操作。本例以路由为例，用到的知识点由注释给出！

//router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

let routes = []
//require.context接受三个参数:
//（文件路径，是否遍历子目录，匹配文件正则） 返回一个函数
//routerContext 函数三属性 .resolve{function} .keys{function} .id{string}
//resolve: 接受一个参数request,request为当前文件夹下面匹配文件的相对路径
//返回这个匹配文件相对于整个工程的相对路径
//keys: 返回匹配成功模块的名字组成的数组
//id: 执行环境的id,返回的是一个字符串,主要用在module.hot.accept,是否热加载
//routerContext()作为函数也支持参数传入 传入参数为.key()返回的数组项  
//返回值为module项 和使用import导入模块一样

// routes处理之后的数组就是VueRouter要求的格式
const routerContext = require.context('./', true, /.js$/)
routerContext.keys().forEach(route => {
  if (route.startsWith('./index')) return
  const routerModule = routerContext(route)
  routes = [...routes, ...(routerModule.default || routerModule)]
})
const router = new VueRouter({
  //mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

//main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

3.高版本less-loader配置问题

// vue.config.js文件
module.exports = {
  //省略其他配置
  css: {
    loaderOptions: {
    //================报错=================
      less: {
        globalVars: {
          primary: '#1890ff'
        }
      }
    //======修改 less-loader v-7.0.2=======
      less: {
        sourceMap: true,
        lessOptions: {
          globalVars: {
            primarycls: '#1890ff'
          }
        }
      }
    }
  }
}

解决方法：
1.安装低版本less-loader： npm uninstall less-loader -> npm i less-loader@5.0.0
2.按照最新版本的less-loader配置：注意上图的报错信息，按提示修改如上代码修改部分，具体可自行查阅less-loader文档

4.git tag的用法：方便代码版本管理

git tag //显示所有的tag
git tag -l 'v1.0.*' //查看某个版本系列的tag
git tag -a v1.0.0 -m "内容：v1.0.0" //创建tag
git show v0.0.6 //查看tag的详情，可以看到你commit的内容
git push origin v1.0.0 //推送tag
git tag -d v1.0.0 //删除本地tag
git push origin :refs/tags/v1.0.0 //删除远程tag
--------------实例------------------
git add .
git commit -m "v1.0.3"
git tag v1.0.3
git push
git push origin v1.0.3

5.axios自定义实例默认值headers没有设置header里面的值，需要自行添加。默认axios将JavaScript对象序列化为JSON。如果使用application/x-www-form-urlencoded format,需要使用qs库编码数据。否则后台拿不到正确的数据，编码数据可以放在请求拦截器中。

const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

import qs from 'qs';
const data = { 'bar': 123 };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url,
};
axios(options);

6.远程新建分支，本地使用git branch命令看不到新加的分支

git remote update origin --prune   # 更新远程主机origin 整理分支

7.登录重定向路由报错：Redirected when going from “xxx” to “xxx” via a navigation

// router.js里面添加如下代码
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}