构建和发布

    构建打包成功之后，会在根目录生成 文件夹，里面就是构建打包好的文件，通常是 ***.js 、***.css、index.html 等静态文件。

    如果需要自定义构建，比如指定 dist 目录等，则需要通过 的 outputDir 进行配置。

    环境变量

    所有测试环境或者正式环境变量的配置都在 .env.development构建和发布 - 图1等 .env.xxxx文件中。

    它们都会通过 webpack.DefinePlugin 插件注入到全局。

    注意！！！

    环境变量必须以VUE_APP_为开头。如:VUE_APP_API、VUE_APP_TITLE

    你在代码中可以通过如下方式获取:

    1. console.log(process.env.VUE_APP_xxxx)

    如果你的构建文件很大，你可以通过 webpack-bundle-analyzer 命令构建并分析依赖模块的体积分布，从而优化你的代码。

    具体的优化可以参考

    TIP

    强烈建议开启 gzip ，使用之后普遍体积只有原先 1/3 左右。打出来的 app.js 过大，查看一下是不是 Uglify 配置不正确或者 sourceMap 没弄对。 优化相关请看该 Webpack Freestyle 之 Long Term Cache

    发布

    对于发布来讲，只需要将最终生成的静态文件，也就是通常情况下 dist 文件夹的静态文件发布到你的 cdn 或者静态服务器即可，需要注意的是其中的 index.html 通常会是你后台服务的入口页面，在确定了 js 和 css 的静态之后可能需要改变页面的引入路径。

    TIP

    部署时可能会发现资源路径不对 ,只需修改 vue.config.js 文件资源路径即可。

    1. publicPath: './' //请根据自己路径来配置更改

    vue-element-admin 中，前端路由使用的是 vue-router，所以你可以选择两种方式：browserHistory 和 hashHistory。

    本项目默认使用的是 hashHistory ，所以如果你的 url 里有 #，想去掉的话，需要切换为 browserHistory。 修改 src/router/index.js 中的 mode 即可

    如果你使用的是静态站点，那么使用 browserHistory 可能会无法访问你的应用，因为假设你访问 http://localhost:9527/dashboard，那么其实你的静态服务器并没有能够映射的文件，而使用 hashHistory 则不会有这个问题，因为它的页面路径是以 # 开始的，所有访问都在前端完成，如：http://localhost:9527/#/dashboard/。

    不过如果你有对应的后台服务器，那么我们推荐采用 browserHistory，只需要在服务端做一个映射，比如：

    Apache

    1. <IfModule mod_rewrite.c>
    2.   RewriteBase /
    3.   RewriteRule ^index\.html$ - [L]
    4.   RewriteCond %{REQUEST_FILENAME} !-f
    5.   RewriteCond %{REQUEST_FILENAME} !-d
    6.   RewriteRule . /index.html [L]
    7. </IfModule>

    nginx

    TIP

    更多配置请查看

    Apache

    1. 需要修改router/index.js中new Router 配置，加一个, 它指定应用的基路径，该应用是服务于localhost/vue路径下，所以必须加base配置，否则应用会展示 404 页面
    2. 需要修改config/index.js中 build 下的assetsPublicPath: '/vue/'，如果用相对路径，chunk 文件会报错找不到。
    3. 修改httpd.conf文件，开启 rewrite_module 功能。
    • 然后找到AllowOverride None的那行，把它改成AllowOverride All，来使.htaccess文件生效。
    1. 在 apache 的www/vue 目录下新建.htaccess文件, 需要修改RewriteRule 为/vue/index.html, 否则刷新页面服务端会直接报 404 错误。

    .htaccess 文件内容

    1. <IfModule mod_rewrite.c>
    2.   RewriteEngine On
    3.   RewriteBase /
    4.   RewriteRule ^index\.html$ - [L]
    5.   RewriteCond %{REQUEST_FILENAME} !-f
    6.   RewriteCond %{REQUEST_FILENAME} !-d
    7.   RewriteRule . /vue/index.html [L]