vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器。
但是在服务器上是必须要通npm run build命令来对整个项目进行打包,打包后会在项目目录下生成一个dist文件夹:
如果直接将 dist 文件直接放到服务器。
这个文件目录是已经处理好的,能正常打开的目录文件。我这服务器里面用的文件名是 ak
其中遇到的问题和需要处理的有以下几个:配置路由
配置 vue.config.js
Apache 服务器配置 .htaccess 文件
1.配置路由,我这里是使用的 historyconst router = new VueRouter({
routes,
mode: 'history',
base: '/ak'
})配置 vue.config.js, 我这里的 vue-cli 是 3.x 以上,都是要手动配置// vue.config.js
module.exports = {
publicPath: './',
}
配置到这里放到服务器里面是能打开的, 但是只要刷新一下,页面就会丢失。所以要在服务器里面配置 .htaccess 文件。配置 .htaccess 文件
RewriteEngine On
RewriteBase /ak/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /ak/index.html [L]
#这个配置的作用就是把所有服务器上不存在请求全部转发到index.html上去
这里如何要是放置其他的文件, 只要将对应的 ak 文件换成所需的 文件即可。
总体下来,只要掌握上面 3 步,就可以将 vue 项目部署到 Apache 服务器上了。
希望本文对新手小伙伴有所帮助。
如果有什么错误或者补充,请多指教,谢谢!