Vue开发、测试、打包以及生产环境部署总结

背景

本文简略介绍了使用vue-cli工具构建研发和测试环境，最后介绍了项目的生产部署。

第一部分研发环境准备

vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。

直接使用webpack创建项目：

# 安装vue-cli脚手架
$ npm install -g vue-cli
# 初始化项目
$ vue init webpack my-project
# 交互式回显：项目名称、项目描述、作者、打包方式、是否使用ESLint规范代码等等，根据需要自行考虑yes还是no

$ cd my-project
# 安装项目依赖
$ npm install

项目文件树结构：

vue-test
├── build/                 # 脚本目录：webpack 编译任务配置文件:(开发环境与生产环境)
│   └── ...
├── config/                     # 配置目录
│   ├── index.js                # 项目核心配置
│   └── ...
├ ── node_module/               # 依赖的node工具包目录：项目中安装的依赖模块
├── src/                        # 源码文件目录：自己的项目文件都需要放到 src 文件夹下
│   ├── main.js                 # 程序入口JS文件
│   ├── App.vue                 # 程序入口vue组件
│   ├── components/             # 组件目录
│   │   └── ...
│   └── assets/                 # 资源文件目录：一般放一些静态资源文件
│       └── ...
├── static/                     # 静态资源文件目录 (直接拷贝到dist/static/里面)
├── test/                       # 测试文件目录
│   └── unit/                   # 单元测试
│   │   ├── specs/              # 测试规范
│   │   ├── index.js            # 测试入口文件
│   │   └── karma.conf.js       # 测试运行配置文件
│   └── e2e/                    # 端到端测试
│   │   ├── specs/              # 测试规范
│   │   ├── custom-assertions/  # 端到端测试自定义断言
│   │   ├── runner.js           # 运行测试的脚本
│   │   └── nightwatch.conf.js  # 运行测试的配置文件
├── .babelrc                    # babel 配置文件
├── .editorconfig               # 编辑配置文件
├── .eslintignore               # 
├── .eslintrc.js               # ES语法检查配置
├── .gitignore                 # 用来过滤一些版本控制的文件，比如node_modules文件夹 
├── .postcssrc.js               # 
├── index.html                  # 入口页面
├── package.json             # 项目描述文件：记载着一些命令和依赖还有简要的项目描述信息 
├── package-lock.json           #
└── README.md                   #介绍自己这个项目的，可参照 github上star多的项目。

最后启动开发环境：

1 2	# 启动开发环境 $ npm run dev

默认在本地监听8080端口，打开地址：http://localhost:8080/。如果本地端口资源冲突，可以在config/index.js文件中修改port的值进行端口替换。

第二部分生产环境打包

项目开发完成之后，需要将项目部署在生产环境，通常使用下面的命令打包：

1	# npm run build

打包命令执行后，将整个项目编译成静态文件，会在项目目录中生成dist文件夹（index.html文件和static文件夹）。只需要将 dist文件夹放到web服务器上即可。

这里的web服务器可以是Tomcat、Nginx、Apache等web服务器。

第三部分生产环境部署

3.1 Tomcat部署

首先当然是部署好tomcat基础环境，然后将项目打包文件部署在tomcat/apache-tomcat-9.0.41/webapps，各自的tomcat版本差异不同哈。

主要的实施步骤为：

config/index.js (修改assetsPublicPath, 修改目的是为了解决js找不到的问题)
1
assetsPublicPath: '/VueTest/'
这里VueTest是项目的名称，用户自行定义。

当项目中使用vue-router的时候，调整src/router/index.js：

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ],
  mode: 'history',
  base: '/VueTest/'
})

这里主要增加了两个参数：mode和base。

执行npm run build,进行打包生成dist文件

最后上传打包文件：

1
2
3

# tomcat/apache-tomcat-9.0.41/webapps/VueTest# 
-rw------- 1 root root  545 7月  24 05:45 index.html
drwx------ 4 root root 4096 7月  24 13:38 static/

启动tomcat，服务访问url为：http://ip:8080/VueTest/，其中ip为tomcat的部署服务器,8080为tomcat的默认服务端口。

3.2 `Nginx`部署

首先完成nginx部署，文件目录如下：

1 2	root@deeplearning:/data/nginx# ls conf html logs sbin

按照tomcat的方式配置和打包后，放在html目录下面，即：

1
2
3

# nginx/html/VueTest# ll
index.html
static/

接下来需要配置nginx配置文件：

http {
   server {
        # 监听的端口号
        listen       8081;

        # 服务名称 生产环境要修改成 公网ip 如 47.105.134.120
        server_name  localhost;

        # 配置根目录的地址是以 nginx 下的 html 文件夹为根目录来查找的
        root html;

        # 配置默认的主页显示 比如 47.105.134.120:8080 显示的 index 页面
        location / {
            try_files $uri $uri/ /index.html;	    
        }
        # 配置我们的 admin 的前台服务 比如 47.105.134.120:8080/admin/index.html
        location ^~ /VueTest {
            # 处理 Vue 单页面应用 路由模式为 history 模式刷新页面 404 的问题
            try_files $uri $uri/ /VueTest/index.html;
        }
        # 如果你想配置多个项目的话，可以复制上面的，修改一下就可以同时部署多个前端项目了
        # 比如
        # location ^~ /blog {
            # 处理 Vue 单页面应用 路由模式为 history 模式刷新页面 404 的问题
            # try_files $uri $uri/ /blog/index.html;
        # }
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

    include servers/*;
}

最后启动Nginx：

1	root@deeplearning:/data/nginx/sbin# ./nginx &

打开url地址：http://ip:8081/VueTest/

最后补充一个坑：

打开网页报403权限问题，通常是html中的项目文件权限问题。

# 更改文件夹权限
find . -type d -exec chmod 755 {} \;
# 更改普通文件权限
find . -type f -exec chmod 644 {} \;
重启nginx即可

参考文献及资料

1、vue项目文档，链接：https://vuejs.org/

目录

背景

第一部分 研发环境准备

第二部分 生产环境打包

第三部分 生产环境部署