Vue项目部署总结 作者: nbboy 时间: 2020-03-17 分类: Vue 这篇算是备忘吧，主要现在博客稳定后，记录在博客里,以后就可以翻阅。平时做前端时间也不多，所以很大概率会把这些配置忘记。这次记录的是VUE项目的打包分发问题，之前采用VUE项目结构后，开发完成先对项目进行打包，输入yarn build 如果输出以下信息代表打包完成 ```shell File Size Gzipped dist/js/chunk-vendors.ba781709.js 198.06 KiB 65.07 KiB dist/js/chunk-44211732.e3e35f12.js 17.01 KiB 6.70 KiB dist/js/chunk-0b2124a4.8bffe25a.js 9.16 KiB 3.61 KiB dist/js/chunk-38e8d3ac.1a464434.js 8.65 KiB 3.08 KiB dist/js/chunk-6ff45dd8.2ae717de.js 8.00 KiB 2.88 KiB dist/js/app.0b3e8e26.js 5.94 KiB 2.49 KiB dist/js/chunk-7c5ee8e8.c8b49195.js 1.26 KiB 0.61 KiB dist/js/chunk-5c9b991c.61a5548b.js 0.78 KiB 0.67 KiB dist/css/chunk-vendors.6bf76ec9.css 71.25 KiB 11.83 KiB dist/css/app.6ff5d64d.css 32.11 KiB 7.65 KiB dist/css/chunk-0b2124a4.7de6da76.css 2.59 KiB 0.74 KiB dist/css/chunk-44211732.9de0d084.css 2.28 KiB 0.54 KiB dist/css/chunk-6ff45dd8.29306b4a.css 1.27 KiB 0.48 KiB dist/css/chunk-38e8d3ac.dd984e30.css 1.27 KiB 0.48 KiB dist/css/chunk-7c5ee8e8.8eab5faf.css 0.81 KiB 0.34 KiB dist/css/chunk-5c9b991c.127e583c.css 0.08 KiB 0.09 KiB Images and other types of assets omitted. DONE Build complete. The dist directory is ready to be deployed. INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html ✨ Done in 11.34s. ``` 可以在项目目录下，看到一个dist文件。主要是html,css,js文件，我们直接把整个目录分发就可以了。 分发到nginx里进行托管，这里给出一个基础的nignx配置： ```shell server { listen 80; server_name you.domain.com; root /var/www/html/projectPath; location / { index index.html; try_files $uri $uri/ /index.html; add_header Cache-Control 'private, no-store, max-age=0'; } } ``` 最后让nginx再重新加载下就可以了~ ```shell /etc/init.d/nginx reload ``` # 总结 nginx分发VUE项目就是分发静态文件，如果需要更进一步，看下VUE文档里的history模式和hash模式。 标签: vue, nginx, 备忘