vue3学习与打包

最新推荐文章于 2024-04-13 09:59:12 发布

yelinlan

最新推荐文章于 2024-04-13 09:59:12 发布

阅读量137

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/yelinlan/article/details/133080817

版权

vue3打包学习

教程:

V3 Admin Vite教程
 elementui初始化
 elementui-plus组件

vscode技巧

ctrl , 设置 settings.json ;不覆盖之前页面

	   "workbench.editor.enablePreview": false,
       "workbench.editor.showTabs": true

ctrl · 打开控制台
ctrl ， 设置zoom 放大代码字体
.env文件默认开发环境
搜索排除文件 crl H : node_modules/**,dist/
linux启动nginx

whereis nginx   nginx在哪里？ 目录下有conf的就是
service nginx start
service nginx stop
service nginx reload 修改配置文件，需要重载

vue打包成dist ，复制到nginx 目录下
打包路径VITE_PUBLIC_PATH
（就是网站前缀，例如部署到 https://un-pany.github.io/v3-admin-vite/ 域名下，就需要填写 /v3-admin-vite/）
VITE_PUBLIC_PATH = ‘/v3/’ 这个配置的意义
v3-admin-vite.vscode\extensions.json 这个目录的文件内容是推荐安装插件

{
 "recommendations": [
   "editorconfig.editorconfig",
   "dbaeumer.vscode-eslint",
   "esbenp.prettier-vscode",
   "vue.vscode-typescript-vue-plugin",
   "vue.volar",
   "antfu.unocss",
   "zixuanchen.vitest-explorer",
   "wiensss.region-highlighter",
   "shalldie.background",
   "MS-CEINTL.vscode-language-pack-zh-hans"
 ]
}

background插件可以换壁纸
配置nginx

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    # 开启gzip压缩
gzip on;
# 不压缩临界值，大于1K的才压缩，一般不用改
gzip_min_length 1k;
# 压缩缓冲区
gzip_buffers 16 64K;
# 压缩版本（默认1.1，前端如果是squid2.5请使用1.0）
gzip_http_version 1.1;
# 压缩级别，1-10，数字越大压缩的越好，时间也越长
gzip_comp_level 5;
# 进行压缩的文件类型
gzip_types text/plain application/x-javascript text/css application/xml application/javascript;
# 跟Squid等缓存服务有关，on的话会在Header里增加"Vary: Accept-Encoding"
gzip_vary on;
# IE6对Gzip不怎么友好，不给它Gzip了
gzip_disable "MSIE [1-6]\.";

    server {
        listen       6389; #这个IP 端口来的请求，走下面location配置的策略
        server_name  localhost;
		charset utf-8;

			  location /v3/ {#这个v3跟VITE_PUBLIC_PATH这个有关
	 	alias /etc/nginx/v3/;
          try_files $uri $uri/ /v3/index.html;#vue必须要这句话
        }

		location / { 
            alias   /etc/nginx/ruoyi/;
			try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
		
		location /prod-api/ {  #反向代理到后端接口
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For  		$proxy_add_x_forwarded_for;
			proxy_pass http://localhost:8080/;
		}

#如果有多个后端分担压力，可以配置负载均衡策略

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}