欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

从头开始学eShopOnContainers——设置WebSPA单页应用程序

程序员文章站 2022-10-16 14:43:36
一、简介 Web SPA单页应用程序需要一些额外的步骤才能使其工作,因为它需要在生成Docker镜像之前构建JavaScript框架依赖项和JS代码。 二、安装基础环境 1、安装NPM 为了能够使用npm从命令行构建JavaScript依赖项,您需要全局安装npm。由于npm和nodejs捆绑在一起 ......

一、简介

  web spa单页应用程序需要一些额外的步骤才能使其工作,因为它需要在生成docker镜像之前构建javascript框架依赖项和js代码。

二、安装基础环境

1、安装npm

  为了能够使用npm从命令行构建javascript依赖项,您需要全局安装npm。由于npm和nodejs捆绑在一起,所在只需要从下载推荐版本安装即可。安装完成后可通过“npm -v”查看版本信息,验证是否安装成功。

  从头开始学eShopOnContainers——设置WebSPA单页应用程序

2、安装angular cli

  编译web spa单页应用程序需要全局安装angular cli,使用“npm install -g @angular/cli”命令即可完成安装,安装完成后可通过“ng version”查看版本信息,验证是否安装成功

  从头开始学eShopOnContainers——设置WebSPA单页应用程序

3、在visualstudio中设置npm路径信息

  在visualstudio的菜单“工具”->"选项"设置中,添加nodejs路径,注意必须添加至“vsinstalledexternaltools”前面。

  从头开始学eShopOnContainers——设置WebSPA单页应用程序

三、使用npm构建webspa单页应用程序

1、切换至源代码目录,执行“npm install”安装所有依赖,并重建node-sass。

cd /d d:\tfs2018\eshoponcontainers-dev\src\web\webspa
npm  install
npm audit fix
npm rebuild node-sass

2、构建构建webspa单页应用程序

npm run build:prod

从头开始学eShopOnContainers——设置WebSPA单页应用程序

3、将“docker-compose”设置为默认启动项目,按f5或者点运行。

  项目正常启动后,即可正常打开webspa单页应用程序网页: 。

  从头开始学eShopOnContainers——设置WebSPA单页应用程序