Maison > Article > Opération et maintenance > Comment empaqueter le projet Vue et déployer le serveur nginx
Lorsque nous utilisons souvent des projets de séparation front-end et back-end, nous devrons empaqueter la vue front-end puis la déployer.
vue peut en fait être empaqueté directement via l'instruction suivante :
npm run build
La situation d'emballage par défaut est la suivante :
Lorsque nous devons modifier le nom de l'emballage et l'emplacement de la ressource statique. , nous devons le faire Configuration correspondante :
1. Créez d'abord le fichier vue.config.js dans le répertoire racine du projet
Le contenu de la configuration est le suivant (avec résolution de problème inter-domaines incluse) :
module.exports = { //打包 publicPath: './', outputDir: 'test', //打包输出目录 assetsDir: './static', //放置生成的静态资源 filenameHashing: true, // 生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存 lintOnSave: false, //设置是否在开发环境下每次保存代码时都启用 eslint验证 productionSourceMap: false,// 打包时不生成.map文件 // 解决跨域配置 devServer: { //记住,别写错了devServer//设置本地默认端口 选填 port: 8080, proxy: { //设置代理,必须填 '/api': { //设置拦截器 拦截器格式 斜杠+拦截器名字,名字可以自己定 target: 'http://localhost:9090', //代理的目标地址(后端设置的端口号) changeOrigin: true, //是否设置同源,输入是的 pathRewrite: { //路径重写 '/api': '' //选择忽略拦截器里面的单词 } /*也就是在前端使用/api可以直接替换为(http://localhost:9090)*/ } } }, }
2. Vérifiez le routage (router/index.js) s'il faut utiliser l'historique, si c'est le cas, changez-le en hachage. Ou décochez simplement le mode car le hachage est utilisé par défaut.
const router = new VueRouter({ /*mode: 'history',*/ mode: 'hash', routes:[] }) export default router
Ensuite, utilisez à nouveau npm run build pour empaqueter, et le dossier de test apparaîtra et les fichiers statiques seront placés dans static.
Le packaging est désormais terminé.
3. Recherchez le chemin du fichier empaqueté
Double-cliquez sur le fichier index.html empaqueté et vous verrez la page d'accueil.
Vous devez d'abord installer nignx, qui n'est sans doute pas présenté ici. (Ou les étapes d'installation spécifiques seront placées dans la section nginx plus tard)
Configurez directement dans nginx.conf :
server { listen 8021; server_name localhost; location /test{ alias /home/hyq/vue_file; index index.shtml index.html index.htm; }
La signification spécifique de la configuration :
#user nobody; 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; ssi on; ssi_silent_errors on; ssi_types text/shtml; #定义的服务器列表 upstream cms { #这里代表代理的项目端口为127.0.0.1:8111端口(weight等配置自行查询) server 127.0.0.1:8111 weight=5 max_fails=3 fail_timeout=20s; } server { listen 8096; #nginx使用8096 server_name localhost; #服务名称 location /menhu/cms { proxy_pass http://cms; #请求转向cms 定义的服务器列表。也就是访问localhost:8096/menhu/cms 会转向到上方服务器列 #表中的127.0.0.1:8111 } location /qgxzzfzhgljdpt { root D:\BDWorkParce3\LPT_MENHU\wwwroot_release; #根目录 index index.shtml index.html index.htm; #设置默认页 #访问localhost:8096/qgxzzfzhgljdpt 会打开 D:\BDWorkParce3\LPT_MENHU\wwwroot_release\qgxzzfzhgljdpt下级中的index.shtml/index.html/index.htm默认页 } location ^~ /template { return 404; } location = /c/ { return 404; } location = /css/ { return 404; } location = /images/ { return 404; } location = /include/ { return 404; } location = /js/ { return 404; } location = /style/ { return 404; } location = /upload/ { return 404; } location = /html/ { return 404; } location = /root/ { return 404; } location ~ .*.(svn|Git|git) { return 404; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } } ########### 每个指令必须有分号结束。################# #user administrator administrators; #配置用户或者组,默认为nobody nobody。 #worker_processes 2; #允许生成的进程数,默认为1 #pid /nginx/pid/nginx.pid; #指定nginx进程运行文件存放地址 error_log log/error.log debug; #制定日志路径,级别。这个设置可以放入全局块,http块,server块,级别以此为:debug|info|notice|warn|error|crit|alert|emerg events { accept_mutex on; #设置网路连接序列化,防止惊群现象发生,默认为on multi_accept on; #设置一个进程是否同时接受多个网络连接,默认为off #use epoll; #事件驱动模型,select|poll|kqueue|epoll|resig|/dev/poll|eventport worker_connections 1024; #最大连接数,默认为512 } http { include mime.types; #文件扩展名与文件类型映射表 default_type application/octet-stream; #默认文件类型,默认为text/plain #access_log off; #取消服务日志 log_format myFormat '$remote_addr–$remote_user [$time_local] $request $status $body_bytes_sent $http_referer $http_user_agent $http_x_forwarded_for'; #自定义格式 access_log log/access.log myFormat; #combined为日志格式的默认值 sendfile on; #允许sendfile方式传输文件,默认为off,可以在http块,server块,location块。 sendfile_max_chunk 100k; #每个进程每次调用传输数量不能大于设定的值,默认为0,即不设上限。 keepalive_timeout 65; #连接超时时间,默认为75s,可以在http,server,location块。 upstream mysvr { server 127.0.0.1:7878; server 192.168.10.121:3333 backup; #热备 } error_page 404 https://www.baidu.com; #错误页 server { keepalive_requests 120; #单连接请求上限次数。 listen 4545; #监听端口 server_name 127.0.0.1; #监听地址 location ~*^.+$ { #请求的url过滤,正则匹配,~为区分大小写,~*为不区分大小写。 #root path; #根目录 #index vv.txt; #设置默认页 proxy_pass http://mysvr; #请求转向mysvr 定义的服务器列表 deny 127.0.0.1; #拒绝的ip allow 172.18.5.54; #允许的ip } } }
Puis démarrez ou redémarrez nginx.
Visite : adresse du serveur : 8021/test.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!