VueJS строить в папку маршруты не работает - PullRequest
Новая
       11

VueJS строить в папку маршруты не работает

0 голосов
/ 24 апреля 2018

У меня есть приложение 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.

Любая помощь будет отличной, спасибо!

Ответы [ 2 ]

0 голосов
/ 24 апреля 2018

Экземпляр Vue видит весь путь от корня, а не только часть относительно того, что на вашей странице действительно есть Vue.

У Vue-Router должны быть некоторые настройки, где вы можетеустановите корень, или вы можете изменить свои пути, чтобы включить полный путь в маршруты.

0 голосов
/ 24 апреля 2018

Ваша проблема в том, что вы размещаете приложение vue в подпути, в то время как по умолчанию оно ожидается в /.Чтобы решить эту проблему, вам нужно установить base в vue-router.

. Возможно, вам также нужно будет установить assetsPublicPath в вашем config.index.js

...