Vue项目开发流程

官网:>

你的服务器是什么系统啊 ，，，linux LINUX、WINDOWS、NETWARE、UNIX。。

在linux

首先服务器安装node git   nginx  vue-cli

安装好nginx 用你的公网ip访问就可以看到 下面的页面

然后进入到下面的路径

vi default 你会看到nginx的默认配置

默认监听80端口 根路径

把你写好的vue项目 上传到github ，通过git clone 克隆到

服务器

路径下面

然后npm/yarn add/install 安装依赖 然后npm run build

vi 打开html 下面的 indexhtml 可以看到

nginx默认的html

进入sites-enabled 发现 它里面的 default 来自 sites-available的default

所以需要在 sites-available 新建一个文件 你的项目名命名就可以

在你新建的文件

我在site-available新建的文件是note-admin 映射到 sites-enables

注意路径一定要写全

最后重新加载下 nginx -s reload

打开浏览器 公网ip:端口号  或者 域名访问

这就可以了

还有 用express 部署这个 简单些

在搞清root，alias，try_files的基本用法后，我开始尝试vue项目的部署。
（用法我之前的文章也研究过）
此前，听说挺多小伙伴会遇到vue-router-history模式种种问题，比如路径无法匹配，找不到静态资源，刷新页面404，etc

不急，只要找到原因，问题是可以迎刃而解的。

项目部署环境一般可以分为三种：生产环境，测试环境，开发环境。

开发环境 ：开发环境时程序员专门用于开发的服务器，配置可以比较随意，为了开发调试方便，一般打开全部错误报告和测试工具，是最基础的环境。

生产环境 ：生产环境是指正式提供对外服务的，一般会关掉错误报告，打开错误日志，是最重要的环境。部署分支一般为master分支。

测试环境 ：一般是克隆一份生产环境的配置，一个程序在测试环境工作不正常，那么肯定不能把它发布到生产服务器，是开发环境到生产环境的过渡环境。

测试环境的分支存在bug，一般不会让用户和其他人看到，并且测试环境会尽量与生产环境相似。

如何区分生产环境和开发环境？

processenvNODE_ENV 是 node 的全局变量 process 的一个属性，它的作用是区分当前环境是生产环境还是开发环境，

可以参考学习： 理解webpack中的processenvNODE_ENV

其实一般的vue单页面应用项目中，遇到路径无法匹配，或者资源引用错误问题都是由于以下几个属性造成的，如果你经常翻官网文档，那看到这里应该就已经会意，他们分别是：

接下来我将讲解以下这几个属性的使用。

依照官网的解释，贴一张用法图：

当使用基于 HTML5 historypushState 的路由时，“相对 publicPath” 会受到限制，即是说在使用history模式时，publicPath需要设置为绝对路径。那么在vueconfigjs文件中，你应该这样配置：

在nginx配置文件中你就需要这样配置：
假设我的项目名为history，并且放在/usr/local/webserver/nginx/myProject 目录下，如tree图

示例贴一下： 珂朵莉的服务器 (点击about会使用路由跳转)

如果你的配置出现页面空白，或者404访问错误，资源引用问题（F12可观察），这时你就要检查publicPath，assetsDir甚至是nginx有没有配置正确了。

我觉得原因是页面刷新时，服务器找不到任何的静态资源，就报404，那么解决办法就简单了： 你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 indexhtml 页面，这个页面就是你 app 依赖的页面。即使用try_files 寻找indexhtml。
可以参考本项目的nginx配置：

但如此配置后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 indexhtml 文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。
参考官网例子：

另一方面,有可能是Vue-Router没有配置好，需要注意初始化Router时候的base参数:

如此项目部署就完成了。

感谢博哥指出之前文章错误之处，已经修正，谢谢

    在之前已经熟悉了如何使用vue-cli进行新建项目，具体见 vue入门：使用vue-cil新建vue项目 。现在我们对具体开发中项目的整体架构进行设计，在这之前我们需要学习并掌握vue的基础知识，详细可见 vue官方文档 。

首先看下我们的项目结构图。
本vue项目结构，在vue-cli所生成的默认结构上有所调整，具体每个文件模块的功能将在以后的文档中进行具体讲解。

1、在根目录下新建了mock文件夹，文件夹中增加了indexjs和utiljs。主要是用于前端项目提供测试接口及数据。

2、在src文件夹下新建了api文件夹，文件夹中增加了indexjs和apijs。主要是用于将项目中的所有api接口进行封装统一管理。

3、在src文件夹下新建了axios文件夹，文件夹中增加了indexjs。主要是用于对请求进行一些拦截和封装处理。

4、在src文件夹下新建了common文件夹，主要用来存放公用的组件及方法等。

5、在src文件夹下新建了pages文件夹，主要用于存放构建页面的组件。

6、src下的router文件夹，主要用来管理项目中的所有路由，及对路由拦截的封装等。

7、src文件夹下新建了store文件夹，主要用来进行vuex项目的状态管理。

8、static文件夹中增加configjs，主要是用来进行vue项目中的配置，如api接口地址等，在打包发布后，static文件将被保留。

新建好结构之后，我们在后面将分别对各个结构中的功能进行补充完善。

1 打包vue项目

首先，执行下面指令，将vue项目进行打包后生成dist文件夹

npm run build

2进入dist目录下，将dist中的文件全部打包成war包

cd dist

sudo jar -cvf distwar

3进入weblogic管理控制台，点击部署-安装

然后点击上载文件，选择刚刚打包好的war包，然后一路下一步，最后点击完成就部署成功了
4点击测试，点击项目的url就可以访问自己的web项目了

验证是否成功： 电脑win键+R---> 输入cmd --->版本号不一样没关系，输出结果为版本号就表示安装成功。

在项目终端terminal输入命令行：

NPM详细介绍可看++：----->  [NPM 使用介绍 | 菜鸟教程]

启动本地服务--- Ctrl 点击红框链接就可以看到自己的Vue项目啦~~

！注意是serve不是server嘿嘿因为我也经常写错~~~

（这步可做可不做哦~）

设置如下：

打开config文件夹下的indexjs文件

查找（ Ctrl+F ） autoOpenBrowser更改配置为true

以下是博主参与的Vue项目demo:

大屏数据可视化嘿嘿

关于如何讲项目打包放到Github与远程服务器的部署，我们下期再见~嘿嘿嘿

---