前端编译文档.md

DSS 前端编译文档

启动流程

一、安装 Node.js

将 Node.js 下载到电脑本地，安装即可。

下载地址：http://nodejs.cn/download/ （最新稳定版本可能存在不兼容问题，可以使用以经过测试的版本v10.16.2、v-14.15.0）后端同学建议在Linux下进行

该步骤仅第一次使用时需要执行。

二、安装项目

在终端命令行中执行以下指令：

cd DataSphereStudio/web
lerna bootstrap

指令简介：

1. 进入项目包根目录：cd DataSphereStudio/web
2. 安装项目所需依赖：lerna bootstrap
3. 若未安装lerna命令，可以通过npm install lerna -g命令进行安装

三、打包项目

您可以通过在终端命令行执行以下指令对项目进行打包，生成压缩后的代码：

npm run build

该指令成功执行后，项目根目录下会出现一个名叫 “dist” 的文件夹，该文件夹即为打包好的代码。您可以直接将该文件夹放进您的静态服务器中。

四、运行项目

如果您想在本地浏览器上运行该项目并且改动代码查看效果，需要在终端命令行中执行以下指令：

npm run serve

在浏览器中（建议使用 Chrome 浏览器）通过链接访问应用：http://localhost:8080/

当您使用该方式运行项目时，您对代码的改动产生的效果，会动态体现在浏览器上。

注意：因为项目采用前后端分离开发，所以在本地浏览器上运行时，需要对浏览器进行设置跨域才能访问后端接口：

这里介绍 chrome 浏览器如何设置跨域：

• windows 系统下的跨域配置方式：

  1. 关闭所有的 chrome 浏览器。
  2. 新建一个 chrome 快捷方式，右键“属性”，“快捷方式”选项卡里选择“目标”，添加  --args --disable-web-security --user-data-dir=C:\MyChromeDevUserData
  3. 通过快捷方式打开 chrome 浏览器

• mac系统下的跨域配置方式：

在终端命令行执行以下命令(需要替换路径中的 yourname，若还不生效请检查您机器上 MyChromeDevUserData 文件夹的位置并将路径复制到下面指令的 --user-data-dir= 后面)

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/yourname/MyChromeDevUserData/

####方式二 使用vue的代理配置,找到web的packages下的dss中的vue.config.js中

  devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:9001',  // 写成你的后端地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        }
      }
    }
  }