VueJS 构建到文件夹路由不起作用 [英] VueJS build to folder routes not working

问题描述

我有一个带有以下配置的 VueJS 应用程序:

I have a VueJS app with the following configs:

1) config.index.js

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

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

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 文件.

The dist folder contains the folder: "static" and the index.html file.

如果我在运行时将dist"文件夹和.htaccess"文件的内容从现有网站复制到vue"文件夹:http://myapp.com/vue/hello 或只是 http://myapp.com/vue/hello，页面没有加载，只加载了index.html"的内容.

If I copy the content of the "dist" folder and the ".htaccess" file to the "vue" folder from my existing website when I run: http://myapp.com/vue/hello or just http://myapp.com/vue/hello, the pages are not loaded, and instead only the content of "index.html" is loaded.

我做错了什么?

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

If I create a virtual machine and point it to the "vue" folder of my website the pages are working well. For example, my virtual machine is http://vue.local. In this case, the http://vue.local/hello page is working.

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

But when I want to run Vue inside of the other website, the pages don't work, all of them return the content of index.html.

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

Any help will be great, thanks!

推荐答案

Vue 实例正在查看从根开始的整个路径，而不仅仅是与页面上实际包含 Vue 的内容相关的部分.

The Vue instance is seeing the whole path from the root, not just the portion relative to what your page that actually has Vue on it.

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

The Vue-Router should have some settings on it where you can set the root, or you can change your paths to include the full path in the routes.

这篇关于VueJS 构建到文件夹路由不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！