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

【问题标题】：VueJs Router links not working on live serverVueJs 路由器链接在实时服务器上不起作用
【发布时间】：2020-01-15 22:52:11
【问题描述】：

我使用路由器链接组件创建了一个 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));
            },
}

【问题讨论】：

它是否在本地服务器上工作
是的，在本地服务器 @sidheart 上一切正常
代码看起来不错尝试将 axios.get('api/clients').then(({data}) => (this.clients = data.data)); 更改为 axios.get('/api/clients').then(({data}) => (this.clients = data.data));
已经试过这个了..还是不行
尝试设置基本网址<base href="http://example.com/project_name/public/client/">

标签： javascript laravel vue.js laravel-blade

【解决方案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>

【讨论】：

我把 .htaccess 文件放到 public_html 目录下还是不行

【解决方案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，并将这个文件夹移动到你的项目根目录

【讨论】：