vue我的项目在开发环境下,让我的项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器。

然而在服务器上是必须要通npm run build命令来对整个我的项目进行打包,打包后会在我的项目目录下生成一个dist文件夹:

如果间接将 dist 文件间接放到服务器。

这个文件目录是曾经解决好的,能失常关上的目录文件。我这服务器外面用的文件名是 ak

其中遇到的问题和须要解决的有以下几个:

  1. 配置路由
  2. 配置 vue.config.js
  3. Apache 服务器配置 .htaccess 文件

1.配置路由,我这里是应用的 history

const router = new VueRouter({  routes,  mode: 'history',  base: '/ak' // 服务器文件})
  1. 配置 vue.config.js, 我这里的 vue-cli 是 3.x 以上,都是要手动配置
// vue.config.jsmodule.exports = {  publicPath: './',}

配置到这里放到服务器外面是能关上的, 然而只有刷新一下,页面就会失落。所以要在服务器外面配置 .htaccess 文件。

  1. 配置 .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滚动会呈现错乱),前期解决了会补上阐明。