在线教育项目前端部署

在线教育项目中的前端有两部分：

• 使用element ui+vue 搭建的后台管理界面；
• 使用Nuxt搭建的前台展示页面。

要对于前端的页面进行打包主要需要使用的就是npm。

1、后台管理项目打包

对于element ui搭建的页面，在打包之前需要对于根目录下的index.html 文件中引入富文本组件中的BASE_URL进行修改。

未修改之前：

<script src= "<%= BASE_URL %>/tinymce4.7.5/tinymce.min.js"></script>
<script src= "<%= BASE_URL %>/tinymce4.7.5/langs/zh_CN.js"></script>

修改后：

 <script src= "<%=  htmlWebpackPlugin.options.url %>/tinymce4.7.5/tinymce.min.js"></script>
  <script src= "<%=  htmlWebpackPlugin.options.url %>/tinymce4.7.5/langs/zh_CN.js"></script>

此处尝试使用npm命令进行打包：

npm run build

需要注意的是，以下未修改的代码不能在修改后注释，必须删除。

<script src= "<%= BASE_URL %>/tinymce4.7.5/tinymce.min.js"></script>
<script src= "<%= BASE_URL %>/tinymce4.7.5/langs/zh_CN.js"></script>

打包成功后会出现以下提示。

2、后台管理项目部署

由于阿里云服务器的容量实在有限，因此本次对于前端项目的部署选在部署在本机电脑上，主要以掌握其打包和部署的流程为目的。

在经过第一步的打包过程并成功打包后，项目中会出现dist文件夹。

从项目文件夹下进入终端命令行，或者将dist文件夹直接拷贝到本地的一个文件夹下进入命令行，执行下面的命令即可将打包的项目运行。

npm install -g serve 
serve -s dist

运行成功后的显示为：

3、前台项目打包和部署

前台项目采用Nuxt+vue进行搭建，其打包流程与后台管理界面的打包流程相比更为简单，直接使用

npm run build

即可打包完成，打包成功后，显示如下：

打包完成后，将 .nuxt、static、nuxt.config.js、package.json文件拷贝到服务器中。

在以上文件拷贝的目录下进入命令行(linux直接输入)，执行下面的命令。

npm install
npm run start

上线成功，出现下面的界面。