Vue 項(xiàng)目的配置
在打包之前音婶，先確定項(xiàng)目中
vue-router的路由模式蚜迅，文中的例子是基于history模式進(jìn)行的配置打包和部署英岭。
vue.config.js
vue.config.js 下的配置：
// vue.config.js
module.exports = {
devServer: {
port: 8081
},
publicPath: '/',
assetsDir: 'static'
}
publicPath：部署應(yīng)用包時(shí)的基本 URL哟绊。
默認(rèn)情況下，Vue CLI 會(huì)假設(shè)你的應(yīng)用是被部署在一個(gè)域名的根路徑上门怪，例如 https://www.my-app.com/骡澈。如果應(yīng)用被部署在一個(gè)子路徑上，你就需要用這個(gè)選項(xiàng)指定這個(gè)子路徑掷空。例如肋殴，如果你的應(yīng)用被部署在 https://www.my-app.com/my-app/，則設(shè)置 publicPath 為 /my-app/拣帽。
assetsDir：放置生成的靜態(tài)資源 (js疼电、css、img减拭、fonts) 的 (相對(duì)于 outputDir 的) 目錄蔽豺。
因?yàn)檫€不知道Nginx怎么配置子目錄頁，這里 publicPath 設(shè)置為 /拧粪。
router.js
new VueRouter({
mode: 'history',
routes
})
Vue-cil3 打包命令
到這里項(xiàng)目中的配置就完成了修陡，打包項(xiàng)目。
npm run build
打包完可霎，會(huì)看到項(xiàng)目文件夾中多了一個(gè)目錄 dist 魄鸦。
進(jìn)去可以看到有三個(gè)東西：
- static
- favicon.ico
- index.html
直接雙擊 index.html 打開瀏覽器，頁面是空白了癣朗，啥都沒有拾因。如果想根據(jù)路由打開指定頁面，就需要部署到服務(wù)器了。
Nginx 部署
在 Vue Router 官網(wǎng)中就有 Nginx 配置的教程绢记。 HTML5 History 模式
官網(wǎng)中有這么一段代碼扁达，接下來的配置會(huì)用到。
location / {
try_files $uri $uri/ /index.html;
}
正式開始
- 隨便找個(gè)地方存放打包后的代碼蠢熄。例如：
/Users/xxx/Documents/project/vue - 創(chuàng)建一個(gè)
hello文件夾跪解。 - 把剛才
dist文件夾里面的東西拷貝過來。 - 命令行進(jìn)入
nginx的目錄签孔，我這里是/usr/local/etc/nginx - 里面有一個(gè)配置文件
nginx.conf叉讥，執(zhí)行：vim nginx.conf - 在合適的位置添加以下內(nèi)容。
server {
listen 8081;
location / {
root /Users/xxx/Documents/project/vue/hello;
index index.html;
try_files $uri $uri/ /index.html;
}
}
其中 root 就是你存放打包后代碼的位置饥追。
- 執(zhí)行命令
nginx啟動(dòng)服務(wù)器图仓。 - 輸入
http://localhost:8081，就能訪問你的根目錄啦Ｅ懈透绩！
如果想部署Tomcat，可以看看這篇文章壁熄。Vue項(xiàng)目打包部署Tomcat
