vue-element-admin部署生产环境

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。

 

通过使用这套模板我们可以快速搭建起完整的  后台管理系统。

 

我们跟着 官网文档 快速建立起开发环境，但是一开始怎么部署到linux的生产环境有点不知所措，这里记录下部署的流程和遇到的问题。

1、打包生成静态文件

# 打包正式环境
npm run build:prod

# 打包预发布环境
npm run build:stage

但是这里有个问题，会存在static/js资源找不到的问题，原因是 默认的 vue-admin-template 中的 vue.config.js 中的 publicPath 是 ‘/’,  这样会导致打包出来的js都是 / 开头的，即是根路径下的文件，但我们往往不需要这样，修改为 './'， 意思为当前路径下。

 

当我们打包好后 会生成一个 dist 文件夹

 

但我们如果直接打开dist文件夹中的 index.html文件会发现js文件加载不了等问题，翻看文档可知需要把 这些静态文件发布到静态服务器中。

       对于发布来讲，只需要将最终生成的静态文件，也就是通常情况下 dist 文件夹的静态文件发布到你的 cdn 或者静态服务器即可，需要注意的是其中的 index.html 通常会是你后台服务的入口页面，在确定了 js 和 css 的静态之后可能需要改变页面的引入路径。

 

2、发布到静态服务器

静态服务器有很多，这里采用nginx的方式配置，通过命令我们可以看到这时我们的nginx已经启动。

打开nginx.conf的配置，配置一个server，具体可以参考如下。

    server {
        listen       9104;
        location /projectStart/ {
            root   /data/project;
            autoindex on;
            autoindex_exact_size on;
            autoindex_localtime on;
        }
        add_header Access-Control-Allow-Origin "*";
        default_type 'text/html';
        charset utf-8;
    }

这时我们可以看到 root地址 配置为 /data/project 文件夹，然后我们还配置了项目前缀，所以我们应该把 dist的内容放到如下文件夹 下：

/data/project/projectStart

如下文件夹中的内容即dist中的内容

 

如果正常的话现在 我们可以通过  127.0.0.1:9104/projectStart 访问到项目了。