جاوااسکریپت - کجا میتوان htmlWebpackPlugin.options.title را در پروژه ایجاد شده با vue cli 3 پیدا کرد یا چگونه آن را تنظیم کرد؟

من میخواستم عنوان صفحه وب خود را که با Vue CLI 3 ساخته شده تنظیم کنم و بنابراین به public/index.html نگاه کردم. در آنجا، من <title><%= htmlWebpackPlugin.options.title %></title> را پیدا کردم.

چگونه میتوانم htmlWebpackPlugin.options.title را در پروژه vue cli 3 تنظیم و تغییر دهم؟

پاسخ شماره ۱

با توجه به محبوبیت این سوال، تصمیم گرفتم یک پاسخ مفصل با منابع اضافه کنم تا آن را معتبرتر و کاملتر کنم. همچنین یک مقاله در این موضوع ایجاد کردهام و این موضوع را در این و این دورهها پوشش دادهام.

اگرچه سؤال به دنبال تنظیم htmlWebpackPlugin.options.title است، اثر نهایی تغییر عنوان صفحه وب است.

۱. راحتترین و پیش پا افتادهترین راهحل

سادهترین راه برای انجام این کار این است که فایل public/index.html را تغییر دهید و عنوان را بهصورت ثابت وارد کنید.

<!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>

این فایل پیشفرض public/index.html است که توسط Vue CLI ایجاد میشود. و در این فایل، شما تنها نیاز دارید که تغییر دهید

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

به

<title>Title of your choice</title>

2. فیلد name را در package.json تغییر دهید

راه حل ساده دیگری این است که "name": "your-project-name" را تغییر دهید. با این حال، محدودیتهای زیادی برای name که میتوانید در package.json استفاده کنید وجود دارد. میتوانید برای اطلاعات بیشتر اینجا را بخوانید. اساساً، package.json باید یک نام داشته باشد و آن نام باید با حروف کوچک باشد و یک کلمه باشد و ممکن است شامل خط فاصله و آندرلاین باشد.

۳. استفاده از فیلد pages در vue.config.js

فایل vue.config.js یک فایل اختیاری است که میتوانید برای ارائه تنظیمات اضافی به Vue CLI اضافه کنید و این فایل، در صورت وجود، بهطور خودکار توسط Vue CLI بارگذاری خواهد شد. شما باید vue.config.js را در پوشه ریشه ایجاد کنید - پوشهای که شامل فایل package.json شما است.

طبق مستندات Vue، شما میتوانید از فیلد pages برای تعریف نقطه ورود در برنامههای چند صفحهای استفاده کنید. با این حال، شما همچنین میتوانید از این فیلد برای تعریف عنوان در برنامههای تک صفحهای نیز استفاده کنید. فایل vue.config.js را در دایرکتوری ریشه ایجاد کرده و فیلد pages را به خروجیهای خود به صورت زیر اضافه کنید:

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

توجه داشته باشید که اگر در حال حاضر سرور توسعه را اجرا میکنید، این تغییر تنها زمانی که سرور توسعه را متوقف کرده و دوباره راهاندازی کنید، اعمال خواهد شد. به عبارت دیگر، این تغییرات به صورت زنده بارگذاری نمیشوند.

۴. زنجیرهسازی Webpack

شما میتوانید Webpack را در vue.config.js به صورت زنجیرهای همانطور که در زیر نشان داده شده است استفاده کنید

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

توجه داشته باشید که مشابه راه حل ۳، این تغییر تنها زمانی که سرور توسعه را متوقف کرده و دوباره راهاندازی کنید، اعمال خواهد شد، در صورتی که هم اکنون سرور توسعه در حال اجرا باشد. به عبارت دیگر، این تغییرات به صورت هات ریلود اعمال نخواهند شد.

5. تغییر عنوان در هوکهای چرخه زندگی با استفاده از جاوااسکریپت

راه حل بعدی در فهرست این است که از جاوااسکریپت برای تغییر عنوان استفاده کنید. شما میتوانید این کار را یا در هوک چرخه عمر mounted کامپوننت ریشه خود انجام دهید یا اگر میخواهید عنوان متفاوت برای مسیرهای مختلف داشته باشید، میتوانید همان کار را برای کامپوننتهایی که توسط هر مسیر بارگذاری میشوند انجام دهید.

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

۶. استفاده از Vue Meta

در نهایت شما میتوانید از Vue Meta برای مدیریت تمام متادیتاها برای اپلیکیشن Vue خود از جمله عنوان استفاده کنید. ابتدا باید Vue Meta را به پروژه خود اضافه کنید و سپس از فیلد metaInfo همانطور که در زیر نشان داده شده است برای پیکربندی متادیتا برای صفحه یا مسیر خود استفاده کنید.

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

نتیجهگیری

چهار راه حل اول روشهای ایستای تغییر عنوان شما هستند و به عبارت دیگر، با استفاده از این روشها نمیتوانید عنوان خود را در زمان اجرا تغییر دهید. همچنین هیچکدام از اینها به صورت هات ریلود نیستند. دو گزینه آخر از جاوااسکریپت استفاده میکنند و میتوانند عنوان را در زمان اجرا تغییر دهند.

پاسخ شماره ۲

یک فایل vue.config.js در ریشه ایجاد کنید

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

ببینید https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin

پاسخ شماره ۳

خصوصیت name را در فایل package.json خود بهروزرسانی کنید

{
  "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"
  ]
}

بهروزرسانی: روش فوقالذکر تنها در صورتی کار میکند که از عنوانی مناسب برای URL استفاده کنید.

راههای دیگری هم برای انجام آن وجود دارد

• از مستندات رسمی Vuejs در بخش تنظیمات صفحات، میتوانید از پیکربندی پلاگین HTML برای مشخص کردن عنوان برای صفحات مختلف استفاده کنید
• از متغیرهای محیطی Modes و Environment Variables استفاده کنید تا عنوان برنامه/صفحه خود را نگه دارید. من شخصاً این روش را ترجیح میدهم و استفاده میکنم.

.env (یا هر .env.[mode] دیگری)

VUE_APP_NAME=Application flixible name

و اینگونه است که شما آن را در مکانهای مختلف در برنامه خود صدا میزنید

AnyComponent.vue (به عنوان یک ویژگی داده)

تایپاسکریپت

appName: string = process.env.VUE_APP_NAME

جاوااسکریپت

appName: process.env.VUE_APP_NAME

anyHTML.html

<%= process.env.VUE_APP_NAME %>