關於vue-cli的線上部署 run build

發佈服務器

進入項目所在目錄運行

npm run build

修改build生成的靜態文件路徑

進入~\config\index.js
在build下的assetsPublicPath默認狀況下是'/'，此時打包的index.html文件中的資源文件(js、css、img)默認狀況都是以/開頭的絕對路徑，指向http服務器的根路徑
若是想修改成相對路徑則須要將assetsPublicPath的值修改成'./'，這樣就是指向index.html的相對路徑了

部署SPA

將打包生成好的項目部署到服務器，可是訪問SPA項目的前端路由會出現404，這是因爲HTTP服務器默認狀況下訪問的是對應目錄下的index.html，此時須要對HTTP服務器作下路由映射，將前端路由地址映射到index.html。

如下是SPA項目經常使用的幾種部署方式:
例如前端路由地址:http://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?http://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實例講解：先後分離