Merge branch 'msb_prod'

fix: node 版本

See merge request yanxuan-frontend/shop-pc!101

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:12.13.1
+FROM node:14.17.0
 WORKDIR /workload
 
 COPY nuxt.config.js /workload/nuxt.config.js

README.md

@@ -5,30 +5,59 @@
  * @LastEditTime: 2022-05-07 11:39:38
  * @Description: file content
 -->
+
 # shop-pc
 
+## 前置环境
+
+由于项目依赖问题，开发 `node` 版本必须是 `14`。
+
+如果电脑安装 `Node 18`，那么怎么添多个 `node` 版本，可以使用 `nvm` 版本管理工具。具体安装可以参考下面教程
+
+[window install nvm](https://juejin.cn/post/7074108351524634655)
+[mac install nvm](https://juejin.cn/post/7206882855200047161)
+
+## 修改前端接口请求地址
+
+进入到 ` plugins/config/env.js` 中：
+
+```js
+// 修改对应值即可
+const ENV = {
+  base_url: "https://k8s-horse-gateway.mashibing.cn",
+  imUrl: "wss://k8s-horse-gateway.mashibing.cn",
+};
+export default ENV;
+```
+
+> `注意 ⚠️`：通常本地开发访问线上接口地址时会出现跨越(协议、域名、端口不一样时就会出现跨越问题)，此时后端服务需要配置跨域相关的内容。
+
 ## 运行&打包
-- 运行直接执行 npm run dev 打包执行npm run build 即可，会根据分支读取不同环境变量配置；
+
+- 运行直接执行 npm run dev 打包执行 npm run build 即可，会根据分支读取不同环境变量配置；
 
 ## 环境变量配置
-- 环境变量配置文件env.config;
-- 配置与分支对应关系：msb_prod -> prod  msb_beta -> beta  msb_test -> test  msb-其他 -> dev
+
+- 环境变量配置文件 env.config;
+- 配置与分支对应关系：msb_prod -> prod msb_beta -> beta msb_test -> test msb-其他 -> dev
 - 输出的环境变量文件：plugins/config/env.js
 - 修改环境变量配置后需要执行 “ node env.config " 输出的环境变量才会更新
-``` js
+
+```js
 // 直接引入输出的配置文件即可
-import ENV from '@/plugins/config/env.js';
+import ENV from "@/plugins/config/env.js";
 // 直接访问你在配置文件中定义的属性
 console.log(ENV.baseUrl);
-
 ```
 
-## 公共方法utils
-- 公共方法统一放置utils文件夹内，可以按分类建方法文件 如：验证类verify.js 请求类request.js；
+## 公共方法 utils
+
+- 公共方法统一放置 utils 文件夹内，可以按分类建方法文件 如：验证类 verify.js 请求类 request.js；
 - 所有公共方法采用大驼峰命名法
-- 所有的方法都从index.js输出，引入时统一引入index，不允许直接引入方法文件
+- 所有的方法都从 index.js 输出，引入时统一引入 index，不允许直接引入方法文件
 - 所有方法文件如果导出的是多个方法，不允许在定义方法时导出，必须在文件底部一一导出，并附上方法简单的注释
-``` js
+
+```js
 // 正确
 import {Req, IsPhone} from '@/common/utils';
 
@@ -46,21 +75,25 @@ export {
 	IsEmail
 }
 ```
+
 ## 组件
-- 根目录的components 只放置真正的组件，某个页面的业务模块应该在pages的相应目录下新建module目录放置
-- 所有的自定义组件文件名以大驼峰命名，且在templet中使用也用大驼峰形式使用(包括页面内的模块组件)
 
-## storage的使用
-- 不要在页面内直接使用loaclStorage，全都放置到vuex中做一次管理
+- 根目录的 components 只放置真正的组件，某个页面的业务模块应该在 pages 的相应目录下新建 module 目录放置
+- 所有的自定义组件文件名以大驼峰命名，且在 templet 中使用也用大驼峰形式使用(包括页面内的模块组件)
 
+## storage 的使用
+
+- 不要在页面内直接使用 loaclStorage，全都放置到 vuex 中做一次管理
 
 ## 请求
-- 项目中有两个axios请求实例，一个事nuxt自带的（不需要Token请使用这个），一个是额外封装的（需要Token请使用这个）；
-- 需要Token的请求，不要写在asyncData中；
+
+- 项目中有两个 axios 请求实例，一个事 nuxt 自带的（不需要 Token 请使用这个），一个是额外封装的（需要 Token 请使用这个）；
+- 需要 Token 的请求，不要写在 asyncData 中；
 - 所有请求方法命名以（Api+请求类型+具体方） 法命名
-- 所有请求使用ToAsyncAwait 包裹
-- 不允许使用try catch 和 then 处理返回结果
-``` js
+- 所有请求使用 ToAsyncAwait 包裹
+- 不允许使用 try catch 和 then 处理返回结果
+
+```js
 // 使用示例
 	// xxapi.js
 	import {ToAsyncAwait, ReqestTk} from '@/common/utils'
@@ -71,7 +104,7 @@ export {
 	}
 	// user.vue
 	improt {ApiGetUserInfo} from '@/common/api/xxapi.js';
-	
+
 	const getUserInfo = async () =>{
 		const {error, result} = await ApiGetUserInfo();
 		if(error){
@@ -82,46 +115,47 @@ export {
 	}
 
 ```
+
 ## css
-- 采用BEM命名法
 
-### 兼容CSS
-``` css
+- 采用 BEM 命名法
+
+### 兼容 CSS
+
+```css
 /* 以下兼容方式的样式请使用util.css中的adj方法 */
-.my-class{
-   transform: translate3d(-50%, 0, 0);
-   -webkit-transform: translate3d(-50%, 0, 0);
-   -moz-transform: translate3d(-50%, 0, 0);
-   -o-transform: translate3d(-50%, 0, 0);
-   -ms-transform: translate3d(-50%, 0, 0);
+.my-class {
+  transform: translate3d(-50%, 0, 0);
+  -webkit-transform: translate3d(-50%, 0, 0);
+  -moz-transform: translate3d(-50%, 0, 0);
+  -o-transform: translate3d(-50%, 0, 0);
+  -ms-transform: translate3d(-50%, 0, 0);
 }
 /* 使用以下方法 */
 @import "~/assets/scss/util.scss";
-.my-class{
+.my-class {
   @include adj(transform, translate3d(-50%, 0, 0));
 }
-
 ```
 
 ## 登录相关
+
 ```javascript
 // 访问token
-this.$store.state.token
+this.$store.state.token;
 // 设置token
-this.$store.commit('setToken')
+this.$store.commit("setToken");
 // 退出登录
-this.$store.commit('setLoginOut')
+this.$store.commit("setLoginOut");
 // 获取登录的用户信息
-this.$store.state.userInfo
+this.$store.state.userInfo;
 
 // 登录拦截
 // 示例：点击购买课程前需要判断当前用户是否登录，未登录则弹出登录弹窗
 function onPurchaseCourse() {
-	if (!this.$isLoginValidate()) {
-		return;
-	}
-	// 此处省略其他业务代码...
+  if (!this.$isLoginValidate()) {
+    return;
+  }
+  // 此处省略其他业务代码...
 }
-
 ```
-