搭建服务器

宝塔Linux面板

在安装服务器系统的时候，选择免费的宝塔Linux系统。也可以选择进入到宝塔官网，使用linux命令安装。

使用xshell工具远程连接linux服务器，输入命令 bt default 启动宝塔面板

进入面板需要下载几种工具 Apche、Mysql、Node.js、PM2管理器

Mysql 数据库启动

确认是否安装了Node环境

node -v 输入命令后，出现版本号，就表示安装成功了Node环境

下载数据库接口包下载包后缀名 .exe 改成 .zip

数据库名：mydb，用户名：username，密码：123456 。这些配置名称需要一一对应，不然在数据库的配置文件无法启动数据库。

点击导入 .\vueShop-api-server-master\db\mydb.sql

在linux系统中，进入到这个文件夹中，运行这个文件，首先要下载依赖：npm install

运行 app.js 文件：node app.js

配置文件：.\vueShop-api-server-master\config\default.json

正常运行状态如图 接口：http://8.140.117.181:8888/api/private/v1/

运行的几个问题：

可能遇到端口占用问题
node命令失效

Apche 启动网站服务

添加默认站点

由于宝塔面板的原因，默认站点需要添加域名，如果你没有备案好的域名，显然是无法添加站点的。因此我们先随便填写域名

点击设置，添加新的域名，就直接添加ip即可

默认站点

设置默认站点就是我们新建的站点

Express 启动项目

我们需要安装 express 服务，去启动vue打包的dist文件

在Linux中的 www/下创建放网站源码的地方，我创建的是 /www/wwwvueshop

将打包的文件，放在 wwwvueshop 中

全局安装 express

npm install express-generator -g

创建 express 项目

express expressvueshop

进入项目，安装依赖

cd expressvueshop/

npm install

将dist文件下内容，全部复制到 express项目下的public文件内

运行项目

npm start

vue路由history模式，刷新404问题

项目运行可能会到端口冲突问题，使用命名停掉冲突端口，例如3000

改变端口运行

在文件 ./expressvueshop/app.js 添加一行代码

1
2
3

app.listen(80,() => {
  console.log('app listening on port 80.')
  })

运行项目正常运行了，当刷新页面就会出现404，有两种解决方案

将路由模式改成 hash模式，服务器后台只认识 hash url

在网站根目录 ./wwwvueshop 下添加文件 .htaccess，添加如下内容

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

使用第二种方式，首先要确认你的Apche配置中有如下内容

搜索LoadModule rewrite_module modules/mod_rewrite.so（搜索不到可以是空格，搜索一部分只要能找到就行），去掉前面的“#”号

LoadModule rewrite_module modules/mod_rewrite.so

需要设置好站点的路径，vue打包的入口只有一个index.html，放置在public下面，因此路径要指向public下的index.html

官方提出解决404页面方案

点击跳转

搭建网站使用Apche服务或者Nginx服务，我使用Nginx服务仍然解决不了，刷新404的问题。因此改成使用Apche

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。