如何将 Vue 项目部署到生产环境？答案

【问题标题】：How to delpoy Vue project to production?如何将 Vue 项目部署到生产环境？
【发布时间】：2018-05-31 15:56:43
【问题描述】：

使用 Ubuntu 16.04 和 Nginx，我正在尝试将 Vue 项目部署到生产环境，但一直在白墙上运行。

我将我的项目克隆到

/var/www/html/maak-web/maak_web/

使用npm install 安装所有需要的依赖项并运行以下构建脚本：

node build/build.js

这启动了building for production，它成功并部署了项目。

在我的 nginx 默认配置中，我将根目录更改为指向正确的文件夹，如下所示：

root /var/www/html/maak-web/maak_web;

当我现在访问我的域/IP 时，我看到项目加载（例如网站图标和站点名称加载），并且我可以从这里访问我的 static 文件：

https://mysitedomain.com/static

Vue 项目似乎可以工作，但问题是它实际上并没有显示任何内容，并且访问像 /oneview 和 /anotherview 这样的子视图会抛出 404 page not found 错误。

由于 Vue 似乎没有抛出任何错误，我怀疑是 nginx 配置问题！？

【问题讨论】：

构建脚本是否创建了 index.html？ ngi x 是否配置站点块以获取 index.hrml 文件？
它创建了 'dist' 文件夹和 index.html。 'nginx 是否通过获取 index.html 来阻止该站点'是什么意思？
你用了Vue路由器然后模式是history？
如果你访问#/anotherview而不是/anotherview会发生什么？
感谢@Daniel，看来我完全没有抓住重点。解决方案是将产品构建到 /dist/ 文件夹中并仅发布 /dist/ 文件夹内容。一旦我将内容复制到 /www/html/ ，它就可以正常工作了。

标签： nginx vue.js deployment web-deployment

【解决方案1】：

解决方案是将产品构建到 /dist/ 文件夹中并仅发布 /dist/ 文件夹内容。一旦我将内容复制到 /www/html/ ，它就可以正常工作了。

看到这是一个错误，因为没有将正确的文件放到输出文件夹中，我建议您更新您的 config/index.js 文件以在其中包含正确的生产位置，方法是为 index 设置 index 和 assetsRoot 为 build对象

  build: {

    // Template for index.html
    index: path.resolve(__dirname, '../../srv/www/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../../srv/www'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    ...

【讨论】：