项目如何部署上线
前端如何构建生产环境代码
vueCli/vite/cra/umi等都是运行 build脚本
npm run build
build如何定义 打包生产环境代码配置
- vueCli
在配置文件 vue.config.js中
{
publicPath: '/', //默认是/ 绝对路径 ./相对路径 上线后 静态资源 404
outputDir: 'dist', // 定义打包生产环境代码 目录名 默认是 dist
productionSourceMap: false // 去除生产环境 map文件,加速生产环境代码构建
}
服务器如何配置 Nginx举例
注意:
nginx 部署目录 不能存在 中文 配置 也不行 注释也不行
nginx 要在cmd在运行, nginx目录下打开cmd运行指令
nginx常用指令
start nginx // 启动nginx
nginx -s stop // 停止nginx所有服务
nginx -s reload // 重新加载 nginx 用于 修改了配置后 重启服务
一下是 nginx常用配置 注释不能写中文(以下为了方便学习注释写的中文)
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; // 开启 gzip压缩 提高 网页打开速度
// 服务1
server {
listen 80; // 端口号
server_name localhost; // 域名 生产环境 买的域名, 备案(dns解析)
#charset koi8-r;
#access_log logs/host.access.log main;
// 配置当前服务的 监听的 目录(静态资源根目录)
location / {
root html; // 配置根目录是 nginx目录下 html目录可以是相对路径 或者绝对路径
index index.html index.htm;
}
// nginx 404页面,只需要写一个 404.html放到 html目录即可
error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
// 服务器报错 重定向错误页面 根目录下的 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
// nginx 服务器反向代理
/*
开发项目如何解决跨域问题?
1 开发环境下 脚手架下 配置文件 配置反向代理
2 上线如何还是跨域 利用nginx做反向代理
*/
location ~ ^/api {
proxy_pass 代理的源;
}
# 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;
# }
#}
}