VueJS构建到文件夹路由不起作用答案

【问题标题】：VueJS build to folder routes not workingVueJS构建到文件夹路由不起作用
【发布时间】：2018-10-04 19:59:26
【问题描述】：

我有一个具有以下配置的 VueJS 应用程序：

1) config.index.js

build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),

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

/**
 * Source Maps
 */

productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',

// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],

// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report

}

2) 路由器/index.js

export default new Router({
  mode: 'history',
  // base: process.env.ROUTER_BASE,
  routes: [
    {
      path: '/',
      name: 'HelloWorldBase',
      component: HelloWorld
    },
    {
      path: '/hello',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/auth',
      name: 'Auth',
      component: Auth
    }
  ]
})

3) .htaccess

## https://router.vuejs.org/en/essentials/history-mode.html & https://stackoverflow.com/a/34624803
RewriteEngine On
RewriteCond %{REQUEST_URI} !^/index.html$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !\.(css|gif|ico|jpg|js|png|swf|txt|svg|woff|ttf|eot)$
RewriteRule . index.html [L]

我跑完后：npm run build

dist 文件夹包含文件夹：“static”和 index.html 文件。

如果我在运行时将“dist”文件夹和“.htaccess”文件的内容从现有网站复制到“vue”文件夹：http://myapp.com/vue/hello 或只是http://myapp.com/vue/hello，则不会加载页面，而是只加载“index.html”的内容。

我做错了什么？

如果我创建一个虚拟机并将其指向我网站的“vue”文件夹，则页面运行良好。比如我的虚拟机是http://vue.local。在这种情况下，http://vue.local/hello 页面正在运行。

但是当我想在其他网站中运行 Vue 时，页面不起作用，所有页面都返回 index.html 的内容。

任何帮助都会很棒，谢谢！

【问题讨论】：

您使用什么来托管网站？您尝试将其添加到的“父”站点是什么？它只是一个静态网站吗？ php？另一个 Vue 站点？
我使用的是 Apache，而另一个网站是用 PHP 编写的。但该网站不使用任何 .htaccess 文件。
你检查过控制台看 Vue 是否有错误或者 Vue 是否正在加载？
好观察。我的：domain.com/vue/hello 创建了 Vue App 组件，路径是：path:"/vue/hello" 而不是 path:"/hello"。我想这可能是无法识别路线的问题。
好的，是的，Vue 实例正在查看从根目录开始的整个路径，而不仅仅是相对于您的页面上实际包含 Vue 的部分。

标签： javascript vue.js vuejs2 vue-router

【解决方案1】：

您的问题是您将 vue 应用程序托管在子路径中，而默认情况下它预计存在于 /。要解决此问题，您必须设置vue-router 的base 选项。

您可能还需要在config.index.js 中设置assetsPublicPath

【讨论】：

这就是解决方案。根据 Matti Price 的建议，我使用适用于 Chrome 的 Vue Debug 插件找到了它。

【解决方案2】：

Vue 实例从根目录查看整个路径，而不仅仅是相对于您的页面上实际包含 Vue 的部分。

Vue-Router 上应该有一些设置，您可以在其中设置根目录，或者您可以更改路径以在路由中包含完整路径。

【讨论】：

你拯救了我的一天 :( ，有没有办法避免这种情况？

【解决方案3】：

这就是我在 dockerized vue 项目中构建我的路由器 index.js 的方式，但在部署到生产环境时仍然无法正常工作，而在开发环境中工作。每次我导航到关于屏幕时，它都会返回 404

 Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'landing',
    component: Landing
  } , {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
];

const router = new VueRouter({
  mode: 'history',
  base: '/app/',
  routes
});

我的 docker 文件如下所示：

    FROM node:lts-alpine

# install simple http server for serving static content
RUN npm install -g http-server

# make the 'app' folder the current working directory
WORKDIR /app

# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./

# install project dependencies
RUN npm clean-install --fix

# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .

# build app for production with minification
RUN npm run build --fix

EXPOSE 8080
CMD [ "http-server", "dist" ]

【讨论】：