vue单页应用发布到服务器

发布服务器

进入项目所在目录运行

npm run build

修改 build 生成的静态文件路径

进入~\config\index.js
在build下的assetsPublicPath默认情况下是'/'，此时打包的 index.html 文件中的资源文件(js、css、img)默认情况都是以/开头的绝对路径，指向 http 服务器的根路径

如果想修改为相对路径或服务器中静态资源路径有调整，则需要将assetsPublicPath的值修改为'./'或其他服务器路径，这样就是指向 index.html 的相对路径了。

CSS 中的径可以修改 build/utils.js 中的 publicPath：

if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    publicPath: '../../', //注意: 此处根据路径, 自动更改
    fallback: 'vue-style-loader',
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

部署 SPA

将打包生成好的项目部署到服务器，但是访问 SPA 项目的前端路由会出现404，这是由于 HTTP 服务器默认情况下访问的是对应目录下的 index.html，此时需要对 HTTP 服务器做下路由映射，将前端路由地址映射到 index.html。

以下是 SPA 项目常用的几种部署方式:
例如前端路由地址:https://localhost/live/292/wonderful

Apache

如果只使用 Apache 做 HTTP 服务器，可以设置 Apache 的 url 重定向，将所有的请求路由到 index.html

1. 打开~\Apache\conf\httpd.conf文件
2. 去除 httpd.conf 文件中LoadModule rewrite_module modules/mod_rewrite.so前面的#号
3. 在 httpd.conf 文件中添加重定向规则

RewriteEngine on
# 当访问路由地址为 /live 开头的，则将路由重定向到 /index.html
RewriteRule \/live.*$ /index.html

nginx

使用 nginx 做反向代理服务器，配置文件参考：

server {
    listen 80;
    server_name localhost:80;
    index  index.html;
    root /wwwroot/;
    location / {
        try_files $uri $uri/ /index.html;
    }
}

node.js

使用 node.js 做反向代理服务器，配置文件参考：

var config = require("./webpack.config.js");
var webpack = require("webpack")
var webpackDevServer=require("webpack-dev-server")

config.entry.unshift("webpack-dev-server/client?https://localhost:80", "webpack/hot/dev-server");
var compiler = webpack(config);

var server = new webpackDevServer(compiler, {
  contentBase: "build",
  hot: true,
  inline: true,
  historyApiFallback: true,
  proxy: {
        '/*': {
            target: 'loaclhost:8080/',
            secure: false
        },
    }
});

server.listen(80);

参考

• Vue-router 子页面刷新 404
• Apache Rewrite url 重定向功能的简单配置
• webpack 构建的项目的部署问题
• vue 实现 spa 实例讲解：前后分离