javascript - var kan man hitta eller hur man ställer in htmlWebpackPlugin.options.title i ett projekt skapat med vue cli 3?

Jag ville sätta titeln på min webbplats skapad med vue cli 3 och tittade därför i public/index.html. Där fann jag <title><%= htmlWebpackPlugin.options.title %></title>.

Hur ställer jag in och ändrar htmlWebpackPlugin.options.title i ett vue cli 3-projekt?

Svar #1

Med tanke på frågans popularitet bestämde jag mig för att lägga till ett utförligt svar med referenser för att göra det mer autentiskt och komplett. Jag har också skapat en artikel om detta ämne och täckt detta ämne i denna och denna kurs.

Även om frågan handlar om att ställa in htmlWebpackPlugin.options.title, är den slutliga effekten att ändra titeln på webbsidan.

1. Den mest bekväma och triviala lösningen

Det enklaste sättet att göra detta är att ändra public/index.html och hårdkoda titeln.

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>
</head>

<body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
</body>

</html>

Detta är standard public/index.html som genereras av Vue CLI. Och i detta behöver du bara ändra

    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>

till

<title>Title of your choice</title>

2. Ändra name-fältet i package.json

En annan enkel lösning är att ändra "name": "your-project-name". Det finns dock många begränsningar för name som du kan använda i package.json. Du kan läsa mer om detta här. I grund och botten måste package.json innehålla ett namn som måste vara i gemener och ett ord, och kan innehålla bindestreck och understreck.

3. Använda pages-fältet i vue.config.js

vue.config.js är en valfri fil som du kan lägga till för att tillhandahålla ytterligare konfigurationer till Vue CLI och denna fil, om den finns, kommer automatiskt att laddas av Vue CLI. Du behöver skapa vue.config.js i rotmappen - mappen som innehåller din package.json-fil.

Enligt Vue-dokumentationen kan du använda fältet pages för att definiera ingångspunkt för en flersidig app. Du kan dock också använda detta för att definiera titel för en enkel-sidig app. Skapa vue.config.js i rotkatalogen och lägg till fältet pages i dina exports enligt följande:

module.exports = {
  pages: {
    index: {
      // entry for the page
      entry: 'src/main.js',
      title: 'My Title',
    },
  }
}

Observera att om du redan kör utvecklingsservern, kommer denna ändring endast att återspeglas när du stoppar och startar om utvecklingsservern. Med andra ord kommer dessa ändringar inte att laddas om automatiskt.

4. Kedja Webpack

Du kan kedja Webpack i vue.config.js som visas nedan

module.exports = {
    chainWebpack: config => {
        config
            .plugin('html')
            .tap(args => {
                args[0].title = "My Vue App";
                return args;
            })
    }
}

Observera att precis som med lösning 3 kommer denna ändring endast att återspeglas när du stoppar och startar om utvecklingsservern, om du redan kör utvecklingsservern. Med andra ord kommer dessa ändringar inte att laddas om automatiskt.

5. Ändra titel i livscykelhakar med JavaScript

Nästa lösning i listan är att använda JavaScript för att ändra titeln. Du kan göra detta antingen i mounted-livscykelhaken för din root-komponent eller om du vill ha olika titlar för olika rutter, kan du göra samma sak för komponenter som laddas av varje rutt.

<script>
export default {
  data() {
    return {
      //
    };
  },
  mounted() {
    document.title = 'new title'
  }
}
</script>

6. Använd Vue Meta

Slutligen kan du använda Vue Meta för att hantera all metadata för din Vue-app inklusive titel. Först behöver du lägga till Vue Meta till ditt projekt och sedan använda fältet metaInfo som visas nedan för att konfigurera metadata för din sida eller rutt.

{
  metaInfo: {
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { title: 'My title'}
    ]
  }
}

Slutsats

De första 4 lösningarna är statiska sätt att ändra din titel eller med andra ord kan du inte ändra din titel vid körning med dessa sätt. Dessutom är ingen av dessa hot-reloadade. De sista 2 alternativen använder JavaScript och kan manipulera titeln vid körning.

Svar #2

skapa en fil vue.config.js i roten

//vue.config.js
module.exports = {
    chainWebpack: config => {
        config
            .plugin('html')
            .tap(args => {
                args[0].title = "My Vue App";
                return args;
            })
    }
}

se https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin

Svar #3

Uppdatera name-egenskapen i din package.json-fil

{
  "name": "URL-friendly_app-name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Uppdatering: Den ovan nämnda metoden fungerar bara om du använder en URL-vänlig titel.

Det finns ett par andra sätt att göra det

  • Från den officiella Vuejs-dokumentationen Sidor Konfigurering, kan du använda html-plugin-konfigurationen för att ange titeln för olika sidor
  • Använd miljövariablerna Modes och Environment Variables för att lagra din app-/sidtitel. Jag personligen föredrar och använder denna metod.

.env (eller någon .env.[läge])

VUE_APP_NAME=Application flixible name

Och så här kallar du på det på olika ställen i din app

AnyComponent.vue (som en dataproperty)

TypeScript

appName: string = process.env.VUE_APP_NAME

Javascript

appName: process.env.VUE_APP_NAME

anyHTML.html

<%= process.env.VUE_APP_NAME %>

Relaterade artiklar