Optimized debugging cross-domain setup issues and updated documentation

Issue WeBankFinTech#46
fixed WeBankFinTech#46

docs/en_US/ch2/Compilation.md

@@ -33,10 +33,14 @@ npm install
 You need to make some configurations in your code, such as port address of backend server and socket address of backend server in .env.development file in root directory.
 
 ```
-// Port address of backend server
-VUE_APP_MN_CONFIG_PREFIX=http://yourIp:yourPort/yourPath
-// Socket address
-VUE_APP_MN_CONFIG_SOCKET=/yourSocketPath
+//prefix of Backend service
+VUE_APP_MN_CONFIG_PREFIX=/api/rest_j/v1/
+//prefix of websocket service
+VUE_APP_MN_CONFIG_SOCKET=/ws/api/entrance/connect
+//server host  example http://yourIp:yourPort
+SERVER_HOST=
+//front end run port  default 8080
+PORT=
 ```
 
 You can refer to the official documentation of vue-cli for detailed explanation. [Modes and environment variables](https://cli.vuejs.org/guide/mode-and-env.html#modes)
@@ -59,30 +63,6 @@ You would need to run the following command in terminal if you want to run proje
 npm run serve
 ```
 
-Access the application in browser (Chrome recommended) via link: [http://localhost:8080/](http://localhost:8080/) .
-
-Changes you make to the code would dynamically reflect on the
-effects shown on browser when using the method described above to run project.
-
-**Notes:  Since frontend and backend are developed separately, when running on local browser you need to allow cross domain access in order to access the port of backend server.**
-
-e.g. Chrome browser:
-
-Configuration in Windows:
-
-1. Close all browser windows.
-
-2. Create a shortcut of chrome,  right-click to choose "properties" , then go to "Shortcut" tab find "Target" and add`--args --disable-web-security --user-data-dir=C:\MyChromeDevUserData`  to it .
-3. Use shortcut to open the browser.
-
-Configuration in MacOS:
-
-Run the following command. (You need to replace "yourname" in the path. If it's not working, check the path of MyChromeDevUserData on your machine and copy its path to the place right after "--user-data-dir=")
-
-```
-open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/yourname/MyChromeDevUserData/
-```
-
 ### FAQ
 
 #### Failed installation when running npm install

docs/zh_CN/ch2/编译文档.md

@@ -26,10 +26,13 @@ npm install
 您需要在代码中进行一些配置，如后端接口地址，后端socket地址等，如根目录下的.env.development文件：
 
 ```
-// 后端接口地址
-VUE_APP_MN_CONFIG_PREFIX=http://yourIp:yourPort/yourPath
-// 后端socket地址
-VUE_APP_MN_CONFIG_SOCKET=/yourSocketPath
+//restful http接口版本路径前缀，linkis后端不改一般不需要改一般不需要改 通过代理访问
+VUE_APP_MN_CONFIG_PREFIX=/api/rest_j/v1/
+//restful websocket接口版本路径前缀，linkis后端不改一般不需要改一般不需要改
+VUE_APP_MN_CONFIG_SOCKET=/ws/api/entrance/connect
+//后端host  后端gateway服务
+SERVER_HOST=http://192.168.9.180:9001
+PORT= 前端本地调试端口
 ```
 
 配置的具体解释可参考vue-cli官方文档：[环境变量和模式](https://cli.vuejs.org/zh/guide/mode-and-env.html#%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F%E5%92%8C%E6%A8%A1%E5%BC%8F)
@@ -53,20 +56,6 @@ npm run serve
 在浏览器中（建议Chrome浏览器）通过链接访问应用：[http://localhost:8080/](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.config.js

@@ -11,6 +11,9 @@ const getVersion = () => {
     return pkg.version;
 }
 
+const port = process.env.PORT || 8080
+
+
 module.exports = {
     outputDir: 'dist/dist',
     chainWebpack: (config) => {
@@ -54,5 +57,25 @@ module.exports = {
             entry: 'mock.js',
             power: false
         }
+    },
+    devServer: {
+        port: port,
+        open: true,
+        overlay: {
+            warnings: false,
+            errors: true
+        },
+        proxy: {
+            [process.env.VUE_APP_MN_CONFIG_PREFIX]: {
+                target: process.env.SERVER_HOST,
+                ws: true,
+                changeOrigin: true,
+            },
+            [process.env.VUE_APP_MN_CONFIG_SOCKET]: {
+                target: process.env.SERVER_HOST,
+                ws: true,
+                secure: false,
+              },
+        }
     }
 }