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

川长思鸟来 2021-07-25 15:44 382阅读 0赞

#### 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"
      },
      ……
      }

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

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

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

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

补充说明：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/799896e709ab4d959e306f17d20711be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/4eaba131ef944d64bc19aed09f574198.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20210725/25b4b9d55ef74372b352e0e0e956ebbe.png
[20200605171603288.png]: /images/20210725/4519fb0be6e142d18419ef630e3bc50b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20210725/19a62552243844e08bb1e909e9062d59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]: /images/20210725/4b84fb55c26f47688db1e6438a94493f.png
[20200605172054496.png]: /images/20210725/f20b4b57bd7d49bb95f6c78a45915921.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]: /images/20210725/4dd5cfbda9c04545981d29154e2d859f.png