在线教育项目中的前端有两部分:
- 使用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
上线成功,出现下面的界面。