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

如果我在运行http://myapp.com/vue/hello或http://myapp.com/vue/hello时将“dist”文件夹和“.htaccess”文件的内容复制到现有网站的“vue”文件夹中未加载，而只加载“index.html”的内容。

我做错了什么？

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

但是当我想在其他网站内部运行Vue时，这些页面不起作用，所有这些页面都会返回index.html的内容。

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

Answer 1

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

您可能还需要在assetsPublicPath

中设置config.index.js

Answer 2

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

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

Answer 3

这是我在dockerized vue项目中构建路由器index.js的方式，但是在生产环境中部署时（在开发环境中）仍然无法正常工作。每当我导航到关于屏幕时，它都会返回 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构建到文件夹路由不起作用

3 个答案: