# 構建和發布
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/deploy.html#%E6%9E%84%E5%BB%BA)構建
當項目開發完畢，只需要運行一行命令就可以打包你的應用：
~~~
# 打包正式環境
npm run build:prod
# 打包預發布環境
npm run build:stage
~~~
構建打包成功之后，會在根目錄生成`dist`文件夾，里面就是構建打包好的文件，通常是`***.js`、`***.css`、`index.html`等靜態文件。
如果需要自定義構建，比如指定`dist`目錄等，則需要通過[config](https://github.com/PanJiaChen/vue-element-admin/blob/master/vue.config.js)的`outputDir`進行配置。
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/deploy.html#%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F)環境變量
所有測試環境或者正式環境變量的配置都在[.env.development](https://github.com/PanJiaChen/vue-element-admin/blob/master/.env.development)等`.env.xxxx`文件中。
它們都會通過`webpack.DefinePlugin`插件注入到全局。
注意！！！
環境變量必須以`VUE_APP_`為開頭。如:`VUE_APP_API`、`VUE_APP_TITLE`
你在代碼中可以通過如下方式獲取:
~~~
console.log(process.env.VUE_APP_xxxx)
~~~
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/deploy.html#%E5%88%86%E6%9E%90%E6%9E%84%E5%BB%BA%E6%96%87%E4%BB%B6%E4%BD%93%E7%A7%AF)分析構建文件體積
如果你的構建文件很大，你可以通過`webpack-bundle-analyzer`命令構建并分析依賴模塊的體積分布，從而優化你的代碼。
~~~
npm run preview -- --report
~~~
運行之后你就可以在[http://localhost:9526/report.html](http://localhost:9526/report.html)頁面看到具體的體積分布
具體的優化可以參考[Webpack 大法之 Code Splitting](https://zhuanlan.zhihu.com/p/26710831)
> ## TIP
>
> 強烈建議開啟 gzip ，使用之后普遍體積只有原先 1/3 左右。打出來的 app.js 過大，查看一下是不是 Uglify 配置不正確或者 sourceMap 沒弄對。 優化相關請看該[Webpack Freestyle 之 Long Term Cache](https://zhuanlan.zhihu.com/p/27710902)
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/deploy.html#%E5%8F%91%E5%B8%83)發布
對于發布來講，只需要將最終生成的靜態文件，也就是通常情況下`dist`文件夾的靜態文件發布到你的 cdn 或者靜態服務器即可，需要注意的是其中的`index.html`通常會是你后臺服務的入口頁面，在確定了 js 和 css 的靜態之后可能需要改變頁面的引入路徑。
> ## TIP
>
> 部署時可能會發現資源路徑不對 ,只需修改`vue.config.js`文件資源路徑即可。
~~~
publicPath: './' //請根據自己路徑來配置更改
~~~
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/deploy.html#%E5%89%8D%E7%AB%AF%E8%B7%AF%E7%94%B1%E4%B8%8E%E6%9C%8D%E5%8A%A1%E7%AB%AF%E7%9A%84%E7%BB%93%E5%90%88)前端路由與服務端的結合
vue-element-admin 中，前端路由使用的是`vue-router`，所以你可以選擇兩種方式：`browserHistory`和`hashHistory`。
兩者的區別簡單來說是對路由方式的處理不一樣，`hashHistory`是以`#`后面的路徑進行處理，通過[HTML 5 History](https://developer.mozilla.org/en-US/docs/Web/API/History_API)進行前端路由管理，而`browserHistory`則是類似我們通常的頁面訪問路徑，并沒有`#`，但要通過服務端的配置，能夠訪問指定的 url 都定向到當前頁面，從而能夠進行前端的路由管理。
本項目默認使用的是`hashHistory`，所以如果你的 url 里有`#`，想去掉的話，需要切換為`browserHistory`。 修改`src/router/index.js`中的 mode 即可
~~~
export default new Router({
// mode: 'history', //后端支持可開
})
~~~
如果你使用的是靜態站點，那么使用`browserHistory`可能會無法訪問你的應用，因為假設你訪問`http://localhost:9527/dashboard`，那么其實你的靜態服務器并沒有能夠映射的文件，而使用`hashHistory`則不會有這個問題，因為它的頁面路徑是以`#`開始的，所有訪問都在前端完成，如：`http://localhost:9527/#/dashboard/`。
不過如果你有對應的后臺服務器，那么我們推薦采用`browserHistory`，只需要在服務端做一個映射，比如：
Apache
~~~
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
~~~
nginx
~~~
location / {
try_files $uri $uri/ /index.html;
}
~~~
> ## TIP
>
> 更多配置請查看[vue-router 文檔](https://router.vuejs.org/zh-cn/essentials/history-mode.html)
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/deploy.html#apache)Apache
1. 需要修改`router/index.js`中`new Router`配置，加一個`base: '/vue/'`, 它指定應用的基路徑，該應用是服務于`localhost/vue`路徑下，所以必須加`base`配置，否則應用會展示 404 頁面
2. 需要修改`config/index.js`中 build 下的`assetsPublicPath: '/vue/'`，如果用相對路徑，chunk 文件會報錯找不到。
3. 修改`httpd.conf`文件，開啟 rewrite\_module 功能。
* `LoadModule rewrite_module libexec/apache2/mod_rewrite.so`，去掉前面的#。
* 然后找到`AllowOverride None`的那行，把它改成`AllowOverride All`，來使`.htaccess`文件生效。
4. 在 apache 的`www/vue`目錄下新建`.htaccess`文件, 需要修改`RewriteRule`為`/vue/index.html`, 否則刷新頁面服務端會直接報 404 錯誤。
.htaccess 文件內容
~~~
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /vue/index.html [L]
</IfModule>
~~~
相關[issue](https://github.com/PanJiaChen/vue-element-admin/issues/370)
