前端项目部署云服务器
我在部署的时候还用到了一些优化的东西，优化的具体详情可以看一下下面的链接。
https://blog.csdn.net/zz00008888/article/details/119893222
优化的原因是在打开的时候发现有一个文件 chunk-vendors.js非常耗时，大概两秒，并且在加载的过程中页面会出现空白，对用户体验太差了。
这个是经过了优化后的结果，整个chunk-vendors.js 文件从最开始的两秒缩短到了一秒，虽然时间依然很长，但是已经很好了。
1.安装插件
npm install --save-dev compression-webpack-plugin
AI 代码解读
2.修改vue.config.js(这部分原文章有错误，需要用我下面的代码)
const path = require('path');
const webpack = require('webpack')
const CompressionPlugin = require('compression-webpack-plugin')
const zlib = require('zlib')
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
configureWebpack: {
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'@i': path.resolve(__dirname, './src/assets'),
},
},
plugins: [
new webpack.IgnorePlugin({
resourceRegExp: /^\.\/locale$/,
contextRegExp: /moment$/,
}),
// 下面两项配置才是 compression-webpack-plugin 压缩配置
// 压缩成 .gz 文件
new CompressionPlugin({
filename: '[path][base].gz',
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8,
}),
// 压缩成 .br 文件，如果 zlib 报错无法解决，可以注释这段使用代码，一般本地没问题，需要注意线上服务器会可能发生找不到 zlib 的情况。
new CompressionPlugin({
filename: '[path][base].br',
algorithm: 'brotliCompress',
test: /\.(js|css|html|svg)$/,
compressionOptions: {
params: {
[zlib.constants.BROTLI_PARAM_QUALITY]: 11,
},
},
threshold: 10240,
minRatio: 0.8,
}),
],
},
}
AI 代码解读
3.在项目所在的文件夹里输入命令
npm run build
AI 代码解读
然后就会生成需要放到云服务器上的dist文件夹。
之后在云服务器需要安装两样东西：Nginx和Node.js
4.将dist文件夹复制到Nginx文件夹里的html文件夹下面。
5.修改Nginx下面conf文件夹下面的nginx.conf
直接复制下面的代码然后修改root后的地址
user root;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 8080;
server_name localhost;
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
# 配置禁用 gzip 条件，支持正则，此处表示 ie6 及以下不启用 gzip（因为ie低版本不支持）
gzip_disable "MSIE [1-6]\.";
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root 这里写好dist文件夹所在的地方;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;
# location / {
# root html;
# index index.html index.htm;
# }
#}
# HTTPS server
#
#server {
# listen 443 ssl;
# server_name localhost;
# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
# location / {
# root html;
# index index.html index.htm;
# }
#}
}
AI 代码解读
6.启动Nginx服务器
启动的命令
start nginxAI 代码解读关闭的命令
nginx -s stopAI 代码解读重启的命令
nginx -s reloadAI 代码解读
注意：有时候重启的命令不一定生效，最好直接启动和关闭。
Node直接复制文件夹到云服务器启动即可。
我是软件技术专业的学生，在阿里云最新活动里看见的学生礼遇活动。刚刚好我完成了一个vue的项目，想要部署到云服务器上去试试看，所以我就在找云服务器。
我看过了很多云服务器，最后选中了阿里云服务器的原因最主要的是稳定、安全、有专门的客服来负责。毕竟如果我部署上云服务器了，但是在访问时候不稳定了，崩溃了，想找客服的时候却找不到的话那太难受了。
通过这次部署云服务器，我获得了很多的收获，首先是一种满足感，虽然我的项目做好了，但是却只能我自己看到，这有些孤芳自赏的感觉，但是一旦部署上云服务器，那么我的项目将会给大家看见，能让身边的人看见，能与网上的大家一起联络起来。其次就是收获了很多关于部署云服务器的知识，从一开始不知道该如何去部署，要选什么服务器来部署，要怎么让别人也能访问过来…………
下面是我的项目的一些截图，欢迎大家评论留言。
