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

Posted 2023-03-14

【中文标题】VueJs 路由器链接在实时服务器上不起作用

【英文标题】：VueJs Router links not working on live server

【发布时间】：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/">

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