小白研究项目部署-关于vue项目部署遇到的一些问题
在搞清root，alias，try_files的基本用法后，我开始尝试vue项目的部署。
（用法我之前的文章也研究过）
此前，听说挺多小伙伴会遇到vue-router-history模式种种问题，比如路径无法匹配，找不到静态资源，刷新页面404，etc...
不急，只要找到原因，问题是可以迎刃而解的。
项目部署环境一般可以分为三种：生产环境，测试环境，开发环境。
开发环境 ：开发环境时程序员专门用于开发的服务器，配置可以比较随意，为了开发调试方便，一般打开全部错误报告和测试工具，是最基础的环境。
生产环境 ：生产环境是指正式提供对外服务的，一般会关掉错误报告，打开错误日志，是最重要的环境。部署分支一般为master分支。
测试环境 ：一般是克隆一份生产环境的配置，一个程序在测试环境工作不正常，那么肯定不能把它发布到生产服务器，是开发环境到生产环境的过渡环境。
测试环境的分支存在bug，一般不会让用户和其他人看到，并且测试环境会尽量与生产环境相似。
如何区分生产环境和开发环境？
process.env.NODE_ENV 是 node 的全局变量 process 的一个属性，它的作用是区分当前环境是生产环境还是开发环境，
可以参考学习： 理解webpack中的process.env.NODE_ENV
其实一般的vue单页面应用项目中，遇到路径无法匹配，或者资源引用错误问题都是由于以下几个属性造成的，如果你经常翻官网文档，那看到这里应该就已经会意，他们分别是：
接下来我将讲解以下这几个属性的使用。
依照官网的解释，贴一张用法图：
当使用基于 HTML5 history.pushState 的路由时，“相对 publicPath” 会受到限制，即是说在使用history模式时，publicPath需要设置为绝对路径。那么在vue.config.js文件中，你应该这样配置：
在nginx配置文件中你就需要这样配置：
假设我的项目名为history，并且放在/usr/local/webserver/nginx/myProject 目录下，如tree图
示例贴一下： 珂朵莉的服务器 (点击about会使用路由跳转)
如果你的配置出现页面空白，或者404访问错误，资源引用问题（F12可观察），这时你就要检查publicPath，assetsDir甚至是nginx有没有配置正确了。
我觉得原因是页面刷新时，服务器找不到任何的静态资源，就报404，那么解决办法就简单了： 你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。即使用try_files 寻找index.html。
可以参考本项目的nginx配置：
但如此配置后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。
参考官网例子：
另一方面,有可能是Vue-Router没有配置好，需要注意初始化Router时候的base参数:
如此项目部署就完成了。
感谢博哥指出之前文章错误之处，已经修正，谢谢
vue项目中，解决开发与线上 请求接口不同的问题
在Vue开发当中经常会遇到各种各样的接口问题,最近在项目中遇到开发和线上环境接口路径不一样的问题,网上找到很多博客,大多都是千篇一律的复制粘贴,对于新手来说可能比较难以理解,所以我写这篇博客分享给刚使用vue做项目的小萌新同学一个详细的接口配置思路。
webpack提供了生产环境和线上环境的两种配置文件,平时开发当中使用一个接口,项目上线后就会自动切换成另外一个接口,废话不多说,下面上图。首先是找到vue-cli项目中config文件夹下的dev.env.js,默认是下面的样子:
然后我们需要添加开发环境中使用的请求后台数据的接口域名,如下图:
url_api是我自己设置的,可以自定义。后面的路径就是你自己开发环境中的接口。
接着找到prod.env.js,默认如下图:
在这个文件中同样添加线上请求接口的配置:
最后在自己封装的axios中去调用这个接口:
自定义变量 = process.env.url_api(这个就是刚才在config两个文件中自定义的),拼接url到封装的axios中。最后在生产环境中npm run dev 的时候会自动调用刚才在dev.env.js中定义的接口,当使用npm run build 去打包的时候会自动调用prod.env.js中配置的接口。
另外:跨域的问题
可能有些小伙伴在vue中配置了跨域的代理,所以导致拼接url中proxy代理失效,依然出现跨域的问题,解决这个问题我的个人思路是代理配置不变,只需要在dev.env.js中用空字符串替换本地接口。就不会出现开发环境中跨域的问题了。有不明白的可以问我,有更好的方案也希望能不吝赐教,谢谢。
链接：
vue-router使用过程遇到的问题
初学vue问题记录
问题一、vue-router使用过程遇到的登录页空白问题
之前用vue-cli创建了一个vue项目，默认使用vue-router，目录结构中自带了router目录，里面有index.js
但是当我又创建一个项目的时候默认没有使用vue-router时，后面我使用npm install vue-router安装了插件之后项目中没有自动创建router目录。查找资料显示说这种方式不会创建router目录，自己就把前面创建的项目的router目录及里面的文件拷贝过来使用。
使用的过程中，新建立的项目我自己单独写了一个Login.vue，想把这个登录页面作为首页，使用vue-router配置。我就修改了router目录的index.js。如下：
main.js中引入router.js。如下：
到这里就是我找到的资料要配置登录页的，加上我不使用router-link，我就没有修改App.vue。我以为都配置完成了，就直接启动项目，发现页面空白。后来才发现App.vue中没有使用router-view/router-view。在App.vue加入router-view/router-view启动就成功显示登录页面了。
总结：使用vue-router，
1.需要在router目录的index.js维护好路由
2.main.js中引入router下文件
3.App.vue中使用router-view
最后还发现了一个问题，用 访问title上的favicon没有显示；
用访问title上的favicon就能显示
通过测试发现，好像是浏览器缓存问题，清除浏览器缓存又可以正常显示了。
问题二、使用vue-router过程中，子路由不显示问题
问题描述，我的项目是一个登录页面，项目默认显示登录页面；登录成功后显示登录成功后的默认页面，我的默认页面是由header公共导航和内容组件组成，这个时候出现了问题，header部分组件显示正常，但是内容组件不显示。经过分析查阅资料是因为父路由组件没有使用router-view导致的。我的header组件是由两个组件组成的，就在header组件内加上router-view登录成功后的默认页面就显示正常了。
HeadLayout.vue中增加router-view，解决子路由不显示问题
总结：要使用路由一定要在使用router-view，要在父级组件中使用。
问题三、子路由跳转问题
问题描述：原本MainMenu.vue中使用的是a链接，我添加的click方法进行路由切换，但是总是失败，切换后一闪第二个页面的内容，然后又显示第一个页面内容。写法如下：
第二个子路由页面内容闪一下
最终显示第一个子路由页面内容
这个a链接click的问题原因出现在href上，我只是清空了里面的内容，需要删除该属性，或者将值改为href="javascript:;"，
解析参照：
自己换成router-link实现路由切换，可以正常切换。另外要在router-link上使用click方法切换路由，而不使用to属性，需要使用native修饰符。@clike.native
但是还有一个问题就是我加了一个样式，给router-link，想让激活的link带背景色。我这种写法两个都有这个样式
.router-link-active {
background: #848484;
}
效果如下：
于是我又弃用click了，直接使用to属性才没有问题。
Vue项目开发过程中遇到的坑
1 从浏览器中了解这个应用的呈现结果，对整个应用具有的大功能模块有个大致了解，比如包含欢迎页、用户管理、业务数据查询等；
2 学习了解Vue项目的默认目录结构及加载流程，比如文件index.html、package.json、main.js，目录/build、/config、/src等。
参考链接 ：
优雅的 Vue 项目目录结构设计
VUE启动流程
涉及state对象使用的，大部分是需要先引入vuex，而vuex对象的定义及处理文件，都默认存放在工程的/src/store目录下，到该目录下的相应文件中可找到其他文件依赖的变量数据。
参考链接 ：
Vuex 是什么？
import语法是很多其他语言中都有的关键词，较易理解，但export是干什么用的，export default和export又有什么区别，其他文件是如何使用export出去的变量的？
参考链接 ：
export default 和 export 区别
工程中经常见到v-auth指令，从字面意思上可以理解为权限的验证，但在网上搜不到该指令的含义和用法，后才得知为本应用的自定义指令，并有专门针对该指令进行定义的函数。
参考链接 ：
自定义指令
刚对Vue的组件概念有些了解时，会把所有的元素标签都认为是Vue自定义组件的一部分，然后开始到工程中去找该组件的定义，其实还有很多是官方组件，比如el-popover、el-table、el-table-column等，到相应的官网上找标签的定义和用法即可。
参考链接 ：
Element UI 教程
1 默认用的intellij idea作为Vue工程的开发IDE，在该IDE中启动Vue工程，需要安装node js，并在IDE中配置Run Configurations，详细配置见下面的参考链接；
2 配置好运行参数之后，在启动过程中报错：Error: listen EACCES: permission denied 0.0.0.0:80，该错误的原因为本地80端口被占用，通过关闭80端口占用进程或修改配置文件中的端口号即可正常启动。
参考链接 ：
idea运行vue项目
用idea在本地调试时，只要运行npm run dev即可，但若将分支部署到服务器上，则需先在本地运行npm run build进行编译，然后将编译完的文件上传至git，这样用自动化集成工具进行集成时，才可从git中拉取解析后的文件并正常被web服务读取（该操作与java工程在git中只保存源码不同）。
vue创建新项目按钮不亮
当我们在使用Vue CLI创建新项目时，如果创建新项目按钮不亮，可能有以下原因：
1. Node.js版本过低：Vue CLI需要Node.js 8.9 或更高版本。如果您的Node.js版本过低，建议您升级到最新版本，再尝试重新创建新项目。
2. Vue CLI版本过低：如果您正在使用旧版的Vue CLI，可能会出现创建新项目按钮不亮的情况。建议您更新Vue CLI到最新版本，以便获得更好的功能和稳定性。
3. 网络连接问题：创建新项目需要从远程服务器下载依赖包，如果您的网络连接出现问题，可能会导致创建新项目按钮不亮。您可以尝试检查您的网络连接是否正常，并且可以尝试更换网络环境再尝试。
4. 项目名称不符合规则：创建新项目时，需要输入项目名称。如果您的项目名称包含非法字符或者与已有文件夹同名，可能会导致创建新项目按钮不亮。您可以尝试更改项目名称，并且确保项目名称符合规则。
如果以上方法仍无法解决问题，请尝试通过其他方式创建Vue项目，例如使用Vue官方提供的脚手架工具或者手动创建项目。
如果用vuee创建vue2的项目会有什么问题
其实就是加载时机问题，放在created里会比mounted触发早一点，如果在页面挂载完之前请求完成的话就不会看到闪屏了。
Vue是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。
但是如果你构建的是系统类项目，有上百个路由，这样的话，当你用webpack进行代码热更新的时候，速度就会超级慢，此时解决方法就是让他在开发环境下不要懒加载，在生产环境下再进行懒加载。我们首先要定义一个变量。