如何在与 laravel sanctum for SPA 相同的域中运行 vue 应用程序

Question

我需要帮助在与我的 laravel 应用程序相同的域中运行我的 Vue spa 时，在终端中运行“npm run serve”时我认为它正在工作，但是当我进入浏览器时它拒绝连接。我还没有完成我将使用 sanctum 处理 API 的后端。有没有人和我一样在做同样的项目？喜欢通过对话来解决这个问题。 提前致谢 这是 vue.config.js 文件

 const path = require('path')
    const webpack = require('webpack')
    const createThemeColorReplacerPlugin = require('./config/plugin.config')

    function resolve (dir) {
      return path.join(__dirname, dir)
    }

    /**
     * check production or preview(pro.loacg.com only)
     * @returns {boolean}
     */
    function isProd () {
      return process.env.NODE_ENV === 'production'
    }

    const assetsCDN = {
      css: [],
     // https://unpkg.com/browse/vue@2.6.10/
      js: [
        '//cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js',
        '//cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js',
        '//cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js',
        '//cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js'
      ]
    }

    // webpack build externals
    const prodExternals = {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      vuex: 'Vuex',
      axios: 'axios'
    }

    // vue.config.js
    const vueConfig = {
      configureWebpack: {
        // webpack plugins
        plugins: [
          // Ignore all locale files of moment.js
          new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
        ],
        // if prod is on, add externals
        externals: isProd() ? prodExternals : {}
      },

      chainWebpack: (config) => {
        config.resolve.alias
          .set('@$', resolve('src'))

        const svgRule = config.module.rule('svg')
        svgRule.uses.clear()
        svgRule
          .oneOf('inline')
          .resourceQuery(/inline/)
          .use('vue-svg-icon-loader')
          .loader('vue-svg-icon-loader')
          .end()
          .end()
          .oneOf('external')
          .use('file-loader')
          .loader('file-loader')
          .options({
             name: 'assets/[name].[hash:8].[ext]'
          })

        // if prod is on
        // assets require on cdn
        if (isProd()) {
          config.plugin('html').tap(args => {
            args[0].cdn = assetsCDN
            return args
          })
        }
      },

      css: {
         loaderOptions: {
          less: {
            modifyVars: {
              // less vars，customize ant design theme

              'primary-color': '#00B4E4',
              // 'link-color': '#F5222D',
              'border-radius-base': '4px'
            },
            javascriptEnabled: true
          }
        }
      },

    }
     if (process.env.VUE_APP_PREVIEW === 'true') {
       vueConfig.configureWebpack.plugins.push(createThemeColorReplacerPlugin())
     }
     module.exports = vueConfig
     module.exports = {
       devServer: {
         host: 'app.paymate-ui.test'
      }
    }

Answer 1

如果我理解正确，您想在同一个应用程序文件夹中同时使用 Laravel 和 Vue.js？

那么应该很容易。

1. 首先，为前端使用 Vue 脚手架构建您的应用程序。
2. 然后，创建一个将所有内容重定向到返回 spa 视图的单个控制器方法的路由。 （或使用闭包）
3. 在此视图中，将您的 app.js 作为资产包含在内，并包含主要的 Vue 组件（类似于 <app></app>）。
4. 然后构建您的 Vue 应用程序。现在所有请求都将转发到 spa 视图，其中包括您的 app.js，它应该引导 Vue。