vue我的项目在开发环境下,让我的项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器。
然而在服务器上是必须要通npm run build命令来对整个我的项目进行打包,打包后会在我的项目目录下生成一个dist文件夹:
如果间接将 dist 文件间接放到服务器。
这个文件目录是曾经解决好的,能失常关上的目录文件。我这服务器外面用的文件名是 ak
其中遇到的问题和须要解决的有以下几个:
- 配置路由
- 配置 vue.config.js
- Apache 服务器配置 .htaccess 文件
1.配置路由,我这里是应用的 history
const router = new VueRouter({ routes, mode: 'history', base: '/ak' // 服务器文件})
- 配置 vue.config.js, 我这里的 vue-cli 是 3.x 以上,都是要手动配置
// vue.config.jsmodule.exports = { publicPath: './',}
配置到这里放到服务器外面是能关上的, 然而只有刷新一下,页面就会失落。所以要在服务器外面配置 .htaccess 文件。
- 配置 .htaccess 文件
<IfModule mod_rewrite.c> RewriteEngine On RewriteBase /ak/ RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /ak/index.html [L]</IfModule>#这个配置的作用就是把所有服务器上不存在申请全副转发到index.html下来
这里如何要是搁置其余的文件, 只有将对应的 ak 文件换成所需的 文件即可。
总体下来,只有把握下面 3 步,就能够将 vue 我的项目部署到 Apache 服务器上了。
心愿本文对老手小伙伴有所帮忙。
如果有什么谬误或者补充,请多指教,谢谢!
参观我的项目地址(外面内容仅供参考): http://121.37.204.184/ak/
尽管我的项目部署好了。其中也碰到一些问题(字体压缩后应用生效,scroll-reveal滚动会呈现错乱),前期解决了会补上阐明。