关于vue-cli的线上部署 run build

时间 2019-11-07

标签关于 vue cli 线上部署 run build 繁體版

原文原文链接

发布服务器

进入项目所在目录运行css

npm run build

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

进入~\config\index.js
在build下的assetsPublicPath默认状况下是'/'，此时打包的index.html文件中的资源文件(js、css、img)默认状况都是以/开头的绝对路径，指向http服务器的根路径
若是想修改成相对路径则须要将assetsPublicPath的值修改成'./'，这样就是指向index.html的相对路径了html

部署SPA

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

如下是SPA项目经常使用的几种部署方式:
例如前端路由地址:http://localhost/live/292/wonderfulvue

Apache

若是只使用Apache作HTTP服务器，能够设置Apache的url重定向，将全部的请求路由到index.htmlnode

打开~\Apache\conf\httpd.conf文件webpack
去除httpd.conf文件中LoadModule rewrite_module modules/mod_rewrite.so前面的#号nginx
在httpd.conf文件中添加剧定向规则web

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

nginx

使用nginx作反向代理服务器，配置文件参考：vue-router

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

node.js

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

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);