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

标签 javascript vue.js vuejs2 vue-router

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

1) 配置.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 的内容。

任何帮助都会很棒,谢谢!

最佳答案

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

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

关于javascript - VueJS 构建到文件夹路由不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50003678/

相关文章:

javascript - 如何对 Vuetify 日期范围选择器进行排序?

javascript - 在 javascript 变量中传递查询计数

javascript - 使用 Supertest,我可以创建一个默认设置一些 header 的替代请求吗?

javascript - 如何从 float 取模?

javascript - Prop watch 触发无变化

javascript - 在 Vue 模板中调用时如何处理存储中的 null 值?

javascript - 如何让 JavaScript 和 Python 协同工作?

javascript - Vuejs ajax GET 请求未在 Laravel 5.1 Blade 模板中返回数据

Vue.js - 如何在开发工具中显示我的 Vue 实例属性?

javascript - Vue.js v-validate 从模型中获取值