初学veu,实战项目上线服务器,查遍全网和问遍身边大佬,终于经过我不断地探索,上线成功啦,现在我就为大家梳理一下思路。
首先,我们先看一下官网
链接: Vue CLI部署., 参数配置:publicPath. , Vue Router:HTML5 History 模式

1、步骤

1、项目配置
2、打包项目,命令:npm run build
3、将生成的dist文件内容拖至服务器默认项目地址(Web root default location:/data/www/default)
4、后端配置

2、具体操作

1.项目配置
在config中的index.js里build下修改webpack配置:

assetsPublicPath: ‘/dist/’
注释:此位置为服务器访问下的地址“域名+端口号+地址名称”
在这里插入图片描述
在router中的index.js配置中加上:

export default new Router({
mode: ‘history’,
base: ‘/dist/’, // 加上这一行
routes: constantRouterMap
})
在这里插入图片描述在这里插入图片描述

2、打包

    npm run build 

在这里插入图片描述
打包成功如下图
在这里插入图片描述
生成dist文件夹,生成内容如下
在这里插入图片描述

3、将生成的dist文件内容拖至服务器默认项目地址(Web root default location:/data/www/default)
在这里插入图片描述

4、配置apache服务器,
到linux下apache安装路径/usr/local/apache/conf下,找到 httpd.conf,(apahce的配置文件)查看文件并编辑

  vi httpd.conf

将 AllowOverride None改为 AllowOverride All

AllowOverride All

设置AllowOverride All是为了使apache支持.hatccess文件。

  • 在该项目根目录添加.hatccess文件(index.html平级),内容跟https://router.vuejs.org/zh-cn/essentials/history-mode.html‘>HTML5 History 模式(vue-router文档举例)类似,
  •   <IfModule mod_rewrite.c>
          RewriteEngine On
          RewriteBase /dist/
          RewriteRule ^index\.html$ - [L]
          RewriteCond %{REQUEST_FILENAME} !-f
          RewriteCond %{REQUEST_FILENAME} !-d
          RewriteRule . /dist/index.html [L]
      </IfModule>
    

需要修改的两个地方,

RewriteBase /dist/; 
RewriteRule . /dist/index.html [L],要添加项目所在文件的文件名,

最后一步apache重启

Logo

前往低代码交流专区

更多推荐