Question

我已经使用路由器链接组件创建了一个vuejs项目。一切都可以在localhost上运行，但是在将项目部署到活动服务器时失败，子域路径和路由器链接在活动服务器上失败。

正确的路径应该是example.com/project_name/public/client，但是它会被example.com/client替换。

App.js


let routes = [
    {path: '/dashboard', component: require('./components/dashboard.vue').default},
    {path: '/client', component: require('./components/client.vue').default},

]

const router = new VueRouter({
    mode: "history",
    routes
})

const app = new Vue({
    el: '#app',
    router
});

大师之剑

<div class="page-wrapper" id="app">

  <li>
     <router-link to="/dashboard" title="Dashboard">
     <span class="nav-link-text"><i style="color:white"
       class="fal fa-tachometer-alt"></i>&nbsp;&nbsp; Dashboard</span>
     </router-link>
  </li>

  <li>
      <router-link to="/client" title="Client">
        <span class="nav-link-text"><i style="color:white" class="fal fa-users"></i>&nbsp;&nbsp; Client</span>
      </router-link>
  </li>

</div>

web.php

Route::prefix('api')->middleware('auth')->group(function () {

    Route::apiResource('clients', 'API\ClientController');

});

方法：


methods: {

    getClients() {
                axios.get('api/clients').then(({data}) => (this.clients = data.data));
            },
}

Answer 1

创建一个.htaccess文件并将其粘贴到根目录中：

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^(.*)$ public/$1 [L]
</IfModule>
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>

Answer 2

// 我通过更改 webpack.mix.js 得到了解决方案。按照我的指示，自己尝试一下。 //第一步：完全像这样修改你的webpack.mix.js

const mix = require('laravel-mix');

mix.config.webpackConfig.output = {
    chunkFilename: 'chunks/[name].bundle.js',
    publicPath: '/',
};
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

// 第二步：运行 npm run watch //第三步：复制位于public/js/chunk的chunk文件夹 / 第四步：现在把这个chunk文件夹上传到live server上，把这个文件夹移动到你的项目根目录

VueJs路由器链接在实时服务器上不起作用

2 个答案: