小白前端学习使用Vue2+nodeJs做一个项目并发布到阿里云服务器

两年前端，除了略懂一点php，其他后端知识完全不懂，此文档作为摸索学习记录，如朋友们看到不对的地方或有更好的方法提出建议，在下不胜感激~

这里我演示的是Vue2+Vue-cli3x，nodejs+mysql项目，因太多东西是第一次尝试，所以记录的尽可能详细

nodejs自行下载安装，安装nodejs会附带安装npm 此处为安装包下载地址

一、买一个阿里云ESC服务器

对各大厂商的服务器不了解，买了一个阿里云入门版的当做测试服务器 点此处前往购买

以下为购买流程

1.基础配置

买张家口的是因为价格比较便宜，入门级配置（个人测试是没问题的），服务器系统选择了Windows Server，待有时间后会学习Linux的系统再重新部署一下

2.网络和安全组

因此浏览器只做个人测试，所以选择了按使用流量缴费，此处可按个人喜好来选择

3.系统配置

这个密码要记住，链接远程电脑的时候要用这个密码（忘掉了也是可以在控制台重置的）

4.分组设置不是必填项可跳过

5.确认订单

到这一步看一下配置的没有错就可以付款去了

付款后可在阿里云控制台管理服务器 点此处前往阿里云控制台

此处ip地址（公）为公网IP（用来连接远程电脑及访问测试）

二、Vue项目

学习链接：Vue官方教程 、Vue-CLI官方文档

可以使用下列任一命令安装这个新的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装完成后，命令行中访问 vue 命令查看安装的版本，我安装的是3.9.3

vue --version

将命令行工具位置切换到想创建项目的地址

vue ui

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

这样创建项目比用命令行更简单更直观

填写项目文件夹名称，选择包管理器（我选择的是npm），点击下一步

第一次创建建议手动选择

先选择几个用的上的就可以，之后项目中如需要可以再增加

可保存为新预设，下次创建项目直接就能用了

稍等一会后提示项目创建成功，你在项目文件夹下就能看到了，src为开发目录

可在这里运行项目、打包项目、检查修复源文件

点击运行后完成，再点击启动app，浏览器自动打开运行项目

项目运行显示如下

 

src文件夹下，assets为素材目录（图片、css、js），components为组件目录（vue组件式开发很是用的，文件为.vue），views为视图目录（存放网页，文件为.vue），App.vue为入口文件，mian.js为入口js，router.js、store.js为安装的依赖（项目再添加依赖要创建类似js）

引入样式方法

编写组件方法，style标签那里的scoped属性为仅对当前文件有效

引用组件及使用方法

静态页面自行编写，接下来是打包项目到dist文件夹

运行项目或打包项目之前可以先检查修复下，会减少报错

文件打包成功后，项目文件夹下出现一个dist文件夹，这个文件夹就可以直接部署到服务器了

这个项目是我新创建的没写什么东西，但是当写一些东西后再打包，文件超过244kb就会出现警告

这就需要在vue.config.js中写一些配置了，为解决这个问题我看了网上很多相关帖子，解决办法是 gzip压缩

在根目录下创建vue.config.js，文件内容如下

// vue.config.js

// const path = require("path");
const CompressionPlugin = require("compression-webpack-plugin"); //引入gzip压缩插件
const productionGzipExtensions = ["js", "html", "css"];
const webpack = require("webpack");
module.exports = {
  publicPath: "/",
  productionSourceMap: false, //打包时不要map文件
  outputDir: process.env.outputDir, //输出文件目录
  //是否在保存的时候检查
  lintOnSave: true,
  //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  assetsDir: "static",
  devServer: {
    port: 8090
  },
  configureWebpack: config => {
    if (process.env.NODE_ENV === "production") {
      // 生产环境
      config.plugins.push(
        new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery",
          "windows.jQuery": "jquery"
        }),
        new CompressionPlugin({
          //gzip压缩配置
          // asset: "[path].gz[query]",
          // algorithm: "gzip",
          test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"), //匹配文件名
          threshold: 10240, //对超过10kb的数据进行压缩
          deleteOriginalAssets: false, //是否删除原文件
          minRatio: 0.8
        })
      );
    } else {
      // 开发环境
    }
  },
  // CSS 相关选项
  css: {
    extract: true,
    // 是否开启 CSS source map？
    sourceMap: false,
    // 为预处理器的 loader 传递自定义选项。比如传递给
    // sass-loader 时，使用 `{ sass: { ... } }`。
    loaderOptions: {}, // 为所有的 CSS 及其预处理文件开启 CSS Modules。

    modules: false
  },
  // 在多核机器下会默认开启。
  parallel: require("os").cpus().length > 1,
  // PWA 插件的选项。
  pwa: {},
  // 第三方插件的选项
  pluginOptions: {}
};

此后再压缩还是有这个报错！这是因为没有删除原文件，不建议删除，等传到服务器后调试好了再把多余的删除吧~

三、上传文件到服务器

买了服务器了就赶紧用，要不一天一天过去，钱都浪费了，所以我决定先把静态页面放上去

这里填服务器的公网IP

点显示选项，本地资源下点击详细信息

将项目所在盘选上，然后连接远程桌面

此处密码为买阿里云服务器时，系统设置那里的密码

如果忘记了可去控制台重置

我买的是有UI的服务器，操作起来简单一些

1.在服务器上安装PHPstudy   此处为下载地址

把文件放到项目同一个盘下即可，因为上一步远程的时候选了此盘连接到服务器

在服务器计算机中打开本机文件夹，将PHPstudy安装包复制到服务器盘内进行安装，安装成功后

2.将项目文件夹复制到 C:\phpstudy_pro\WWW 下，再在PHPstudy中配置好即可运行

这是在本机电脑或者手机浏览器上输入域名，就能看到之前做的静态页面了，可以稍微开心一下

四、如何使用nodejs写一个接口

我看了 大帅瓜 写的博客，直接就成功了，一点报错都没有，太厉害了

这里附上大牛原博客，我就不瞎说啥了   点击此处传送

五、把nodejs文件放到服务器运行

连接远程桌面后，将nodejs文件复制到项目目录中server下（自己创建的，前端页面放在web文件夹）

自行安装数据库软件 此处是随便找的安装包地址

在服务器命令行运行nodejs接口，我写的端口是3000

在本机或手机上看接口返回数据看不到，是因为服务器安全组没有配置，3000的这个端口是未定义的

在阿里云控制台安全组列表点击配置规则

添加安全组规则，入方向和出方向都配置上

端口写想要的那个，授权对象写 0.0.0.0/0是无限制

添加好后就发现本机能调用服务器上的接口了，目前仍在做这个项目，会持续更新学习记录。