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

Question

我有一个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）router / 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的内容。

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

Answer 1

Vue实例正在查看来自根的整个路径，而不仅仅是相对于实际具有Vue的页面的部分。

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

Answer 2

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

可能你需要在你的assetsPublicPath中设置config.index.js