Alibaba Cloud View上传文件的到服务器的简单步骤介绍

Alibaba Cloud View上传文件到服务器

之前我用vscode或者xhbuilder 软件开发完界面，都是由后端同事进行文件的上传，今天简单了解了一下上传的步骤，此处做一下简单记录，后续有深入研究会不定时更新。

vscode 打包vue代码

1. 查看 package.json文件中，打包的具体命令是什么，然后执行打包
   注意：以下代码中说明一下：打包有两个命令，一个是 build:prod,一个是build:stage，此处是打包到正式环境中，所以选择build:prod，所以在控制台中执行的命令是npm run build:prod。

{
  "name": "dokit",
  "version": "1.0.0",
  "license": "Apache-2.0",
  "description": "dokit",
  "author": "",
  "scripts": {
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src",
    "test:unit": "jest --clearCache && vue-cli-service test:unit",
    "svgo": "svgo -f src/assets/icons/svg --config=src/assets/icons/svgo.yml",
    "new": "plop"
  },
  ……
  }

2. 打开vue.config.js文件，修改打包文件存储的具体路径及文件夹命名
   注意：此处的publicPath就是打包后的文件夹路径，/表示是当前根目录下。
   outputDir就是打包后的文件夹名称，assetsDir表示静态文件的文件夹名称，如果需要改动，可以查找这个文件。

module.exports = {
  publicPath: '/',
  outputDir: 'html',
  assetsDir: 'admin-static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  ……

3. 执行 nom run build:prod进行打包工作
4. 打包完成后，由于第2步的配置，我们知道打包后的文件存储在html/文件夹中
5. 此时，上传到服务器之前，需要进行服务器端的配置，可以打开webstorm软件。
6. 添加Host服务器
   
   弹出以下界面：
   
   如果提示：链接成功，则代表 服务器IP地址 用户名 密码是正确的。
   
   此时就完成了服务器IP的添加。
7. 修改上传页面：点击webstorm软件右上角的运行命令左侧的默认服务器。
   
   
   
8. 运行上传命令

点击 运行即可执行上传操作。
9. 上传成功后，可以在终端中查看服务器端的文件夹情况。
上传成功后，会提示upload files success等信息。
此时可以直接点击alibaba cloud view出现之前配置的服务器，点击对应的服务器中的terminal终端命令，弹出终端窗口,在此窗口中，输入相应的命令用来查看文件情况。常用的命令如下：
i. cd / 进入根目录
ii. cd /www/server/nginx/html/ 进入到/www/server/nginx/html/文件夹中
iii. ll 查看当前文件夹中的文件情况

补充说明：