nuxt icon indicating copy to clipboard operation
nuxt copied to clipboard

Access to injected js / css files like HtmlWebpackPlugin in vue-cli

Open zxwild opened this issue 4 years ago • 3 comments

Hi, I'm trying to integrate the nuxt app to django templating system. In general all works ok, but I need to be able to modify static files paths.

For example currently I have: <link rel="preload" href="/_nuxt/65145c9ec382088fb536.js" as="script">

but I need: <link rel="preload" href="/static/_nuxt/65145c9ec382088fb536.js" as="script">

I already solved this issue with vue-cli, and all work nice, there I had an access to HtmlWebpackPlugin so I disabled files default injecting and modified app template (it would be app.html in nuxt).

But in nuxt I have only {{ APP }} without any fine tuning.

Is there a way to access to each injected css / js file on app.html rendering?

Here is how it looks with vue-cli: https://stackoverflow.com/a/57125804/1767341

UPD 1:
I realized it's possible to add HtmlWebpackPlugin, now I have js / css files with right paths, but there are a lot of embedded styles and some hardcoded js, so for now the question is "Is it possible to disable js files injecting and leave all the rest as is?"

nuxt.config.js:

  build: {
    extend(config, ctx) {},
    plugins: [
      new HtmlWebpackPlugin(),
    ]
  }

app.html:

  <% htmlWebpackPlugin.files.js.forEach((fileName) => { %>
    <script src="{% static '<%= fileName %>' %}"></script>
  <% }) %>
This feature request is available on Nuxt community (#c9516)

zxwild avatar Jul 20 '19 15:07 zxwild