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 查看當前文件夾中的文件情況

補充說明：