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

2019-08-07 本文已影响0人 FSYu

两年前端，除了略懂一点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,//是否在保存的时候检查

assetsDir:"static",//放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。

devServer: {port:8090},

configureWebpack:config=>{if(process.env.NODE_ENV ==="production") {// 生产环境config.plugins.push(newwebpack.ProvidePlugin({$:"jquery",jQuery:"jquery","windows.jQuery":"jquery"}),newCompressionPlugin({//gzip压缩配置// asset: "[path].gz[query]",// algorithm: "gzip",test:newRegExp("\\.("+ 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: {}};

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