iview admin 生成正式部署子目录文件

  1. 生成部署的文件

windows中运行:

1
set NODE_ENV=production && npm run build

如果 iview admin 是部署到域名子目录下,需要修改 项目根目录下的 vue.config.js,在VS Code编辑器的最下面 😄

1
2
3
4
5
6
7
8
9
10
11
// 项目部署基础
// 默认情况下,我们假设你的应用将被部署在域的根目录下,
// 例如:https://www.my-app.com/
// 默认:'/'
// 如果您的应用程序部署在子路径中,则需要在这指定子路径
// 例如:https://www.foobar.com/my-app/
// 需要将它改为'/my-app/'
// iview-admin线上演示打包路径: https://file.iviewui.com/admin-dist/
const BASE_URL = process.env.NODE_ENV === 'production'
? '/testaa/'
: '/'

重命名 dist 为自己设定的子路径文件名称 testaa,将文件夹 复制到 nginx或者 apache的web根目录下

  1. testaa 文件中,添加 .htaccess
1
2
3
4
5
6
7
8
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /testaa/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
  1. 修改 src/router/index.js
1
2
3
4
const router = new Router({
routes,
mode: 'history'
})

改为

1
2
3
4
5
const router = new Router({
routes,
mode: 'history',
base: '/testaa/' //添加base
})

这样的话,就会一直访问 http://localhost/testaa/ ,如: http://localhost/testaa/home 刷新页面也不会 404咯


  1. 固定語言,修改 src/locale/index.js,在
1
let lang = localLang || localRead('local') || 'zh-CN'

這一行下加

1
lang = 'zh-CN'
Reference
  1. npm下设置NODE_ENV下mac与windows的差异 设置 编辑的环境变量 NODE_ENV的值
  2. iview admin配置到线上的问题整理.htaccess 文件
  3. vue 路由部署服务器子目录问题 学习到路由添加 base
  4. Vue-cli打包后部署到子目录下路径问题