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-router.

可能你也需要assetsPublicPath在你的config.index.js