Vue rendering to php template problem

vue promotional page pre-rendered as PHP template problem

for the promotional page made with vue, the page after build has only one div tag, and the contents are all used in js files. The most important thing is that some pages need php variables to output some data, which is stateless, and asynchronous requests waste a request. You need to report some data directly to the page with php template, and load the data of all pages in one request.

try

use prerender-spa-plugin for pre-rendering, and the effect of data without php direct output on the page is OK. If the page needs php variable input data such as {$list} to get a list, the pre-rendered html will have no data.
attempts to configure externals to apply php output data as variables, but to no avail.

related codes

  externals: {
        pagedata: "pagedata"
    },
    // prerender-spa-plugin
    plugins:[
    new PrerenderSPAPlugin({
          // Index.html is in the root directory.
          staticDir: path.join(__dirname, "../dist"),
          routes: ["/"],
          // Optional minification.
          minify: {
              collapseBooleanAttributes: false,
              collapseWhitespace: false,
              decodeEntities: false,
              keepClosingSlash: false,
              sortAttributes: false
          },

          // renderer: new Renderer({
          //     renderAfterTime: 5000,
          // })
      })
     ]
     
     
    // webpack   vue  {$user} PHP
      data: {
                haha:{$user.haha_balance},
                balance:{$user.balance},
        }
     

you need to get the variable data from the PHP template, and then the pre-rendering ignores these variables, but it can appear in the html of the final build.


if you want php to render the data, what is the meaning of using vue


you want php to render the template, then you cannot use vue-cli to generate the project, you can only use < script > to introduce vue, in this scenario, var a = {$user}; php can render directly, and then you can js call your variable

.
Menu