# 前端代码运行&发布
演示环境:Windows 10 专业版
nodejs:v16.20.2 +
cnpm:[cnpm@8.4.0](mailto:cnpm@8.4.0)
npm源(腾讯源):[https://mirrors.tencent.com/npm/](https://mirrors.tencent.com/npm/)
### 安装和部署NodeJs
在Windows 10上安装和配置Node.js,您可以按照以下步骤进行操作:
1. 下载Node.js安装包:
* 打开Node.js官方网站([https://nodejs.org/download/release/v16.20.2/)。](https://nodejs.org/download/release/v16.20.2/%EF%BC%89%E3%80%82)
* 点击下载页面上的”LTS”版本,这是长期支持版本,适合大多数用户。
* 根据您的系统架构(32位或64位)选择合适的Windows安装包。
2. 运行安装程序:
* 双击下载的安装包启动安装程序。
* 在安装向导中选择默认选项,除非您有特定的需求,否则无需更改设置。
* 在安装过程中,您可能会被询问是否要将Node.js添加到系统路径中,请确保选中此选项,以便在命令行中全局访问Node.js。
3. 验证安装:
* 安装完成后,打开命令提示符(按下Win键并键入”cmd”,然后选择”命令提示符”)或PowerShell。
* 输入以下命令验证Node.js是否成功安装:
~~~shell
node -v
~~~
* 如果成功安装,将显示Node.js的版本号。
4. 配置npm源
更改源:
~~~shell
npm config set registry https://mirrors.tencent.com/npm/
~~~
安装cnpm:
~~~shell
npm install -g cnpm --registry=https://mirrors.tencent.com/npm/
~~~
各版本:
![](https://docs.suteshop.com/uploads/shopsuite-java/images/m_ea2c3906578fa106bafe4ac4cf9b4caa_r.png "null")
5. 配置cnpm源
更改源:
~~~shell
cnpm config set registry https://mirrors.tencent.com/npm/
~~~
6. 关闭DOS窗口,重新打开。
## admin前端代码打包运行:
进入admin前端代码根目录:
1:安装依赖:
~~~shell
cnpm install
~~~
![](https://docs.suteshop.com/uploads/shopsuite-java/images/m_d3a68eea0ed7b959c11c5e01de28c52e_r.png "null")
2:dev模式运行:
~~~shell
cnpm run dev
~~~
![](https://docs.suteshop.com/uploads/shopsuite-java/images/m_db09d858dc09ce6f9e46a12667a1a55f_r.png "null")
3:发布包:
~~~shell
cnpm run build
~~~
![](https://docs.suteshop.com/uploads/shopsuite-java/images/m_f82efb57b76926c95a5740a7cfac2d01_r.png "null")
编译成功之后会在根目录生成admin
![](https://docs.suteshop.com/uploads/shopsuite-java/images/m_30c09956b8342050405dfb3e8745dda7_r.png "null")
以上步骤经过测试验证,打包成功。如遇到问题根据报错信息网上查询解决。
把生成的admin 放入服务器上,nginx设置的指定目录:(如有不同按照自己设置的目录放置)
![](https://docs.suteshop.com/uploads/shopsuite-java/images/m_42d4a0335da0c72ae44074e5d425dd57_r.png "null")
**访问方式:**yourdomain/admin
![](https://docs.suteshop.com/uploads/shopsuite-java/images/m_ab733c35185a92d59e7d5e710991d62a_r.png "null")
## PC前端代码打包运行:
1:安装依赖:
~~~shell
cnpm install
~~~
![](https://docs.suteshop.com/uploads/shopsuite-java/images/m_fc4ecd94e6c62d9714ecf0eb60de11d4_r.png "null")
2:dev模式运行:
~~~shell
cnpm run dev
~~~
![](https://docs.suteshop.com/uploads/shopsuite-java/images/m_1851e23aef9a211e29fc1d400d74b76f_r.png "null")
3:发布包:
~~~shell
cnpm run build
~~~
![](https://docs.suteshop.com/uploads/shopsuite-java/images/m_b8e10dd362a713eab434041c7f0722bf_r.png "null")
编译成功之后会在根目录生成dist
![](https://docs.suteshop.com/uploads/shopsuite-java/images/m_dfb7f7f6f06852d1448eb2170111e8f7_r.png "null")
以上步骤经过测试验证,打包成功。如遇到问题根据报错信息网上查询解决。
把生成的dist改成PC 放入服务器上,nginx设置的指定目录:(如有不同按照自己设置的目录放置)
![](https://docs.suteshop.com/uploads/shopsuite-java/images/m_42d4a0335da0c72ae44074e5d425dd57_r.png "null")
**访问方式:**yourdomain/pc
![](https://docs.suteshop.com/uploads/shopsuite-java/images/m_833e2adbaa08e43192abd372b8032814_r.png "null")