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 & 
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 or just http://myapp.com/vue/hello ，页面不会加载，而只会加载 "index.html" 的内容。

我做错了什么？

如果我创建一个虚拟机并将其指向我网站的 "vue" 文件夹，页面运行良好。比如我的虚拟机是http://vue.local. In this case, the http://vue.local/hello page is working.

但是当我想运行其他网站里面的Vue时，页面不工作，所有的都是return index.html.[=16=的内容]

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

Answer 1

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

可能您还需要在 config.index.js

中设置 assetsPublicPath

Answer 2

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

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

Answer 3

这就是我在 docker 化的 vue 项目中构建路由器 index.js 的方式，但在部署到生产环境时仍然无法正常工作，而在开发环境中可以正常工作。每次我导航到关于屏幕时 returns 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" ]

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

VueJS build to folder routes not working

javascript

vue.js

vue-router

vuejs2