diff --git a/app/assets/javascripts/behaviors/secret_values.js b/app/assets/javascripts/behaviors/secret_values.js
index a34d5dcaef847c0560830d5b06e1ba9eb8452244..b6ed14611cd18d235e381a60810fa25f56d56644 100644
--- a/app/assets/javascripts/behaviors/secret_values.js
+++ b/app/assets/javascripts/behaviors/secret_values.js
@@ -1,5 +1,5 @@
-import { parseBoolean } from '../lib/utils/common_utils';
-import { n__ } from '../locale';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import { n__ } from '~/locale';
 
 export default class SecretValues {
   constructor({
diff --git a/app/assets/javascripts/branches/divergence_graph.js b/app/assets/javascripts/branches/divergence_graph.js
index 31cf9a18077dbb94886fb42740b3a207a93f37ae..17fd39394416e28e20d70f5df0e741c7e67a592b 100644
--- a/app/assets/javascripts/branches/divergence_graph.js
+++ b/app/assets/javascripts/branches/divergence_graph.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import createFlash from '~/flash';
-import axios from '../lib/utils/axios_utils';
-import { __ } from '../locale';
+import axios from '~/lib/utils/axios_utils';
+import { __ } from '~/locale';
 import DivergenceGraph from './components/divergence_graph.vue';
 
 export function createGraphVueApp(el, data, maxCommits, defaultBranch) {
diff --git a/app/assets/javascripts/ci_variable_list/ci_variable_list.js b/app/assets/javascripts/ci_variable_list/ci_variable_list.js
index 055e2f83e33bfea6bc3ba158460c01983e2e31a9..574a5e7fd99ded364d8268563e40395785908956 100644
--- a/app/assets/javascripts/ci_variable_list/ci_variable_list.js
+++ b/app/assets/javascripts/ci_variable_list/ci_variable_list.js
@@ -1,8 +1,8 @@
 import $ from 'jquery';
-import SecretValues from '../behaviors/secret_values';
-import CreateItemDropdown from '../create_item_dropdown';
-import { parseBoolean } from '../lib/utils/common_utils';
-import { s__ } from '../locale';
+import SecretValues from '~/behaviors/secret_values';
+import CreateItemDropdown from '~/create_item_dropdown';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import { s__ } from '~/locale';
 
 const ALL_ENVIRONMENTS_STRING = s__('CiVariable|All environments');
 
diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js
index 8dcab55ac61e4b43159e877f93d4e54e4e51119c..a8fef37263790f3d4d26a45455a9a7c00936129e 100644
--- a/app/assets/javascripts/clusters/clusters_bundle.js
+++ b/app/assets/javascripts/clusters/clusters_bundle.js
@@ -4,10 +4,10 @@ import Vue from 'vue';
 import createFlash from '~/flash';
 import AccessorUtilities from '~/lib/utils/accessor';
 import initProjectSelectDropdown from '~/project_select';
-import Poll from '../lib/utils/poll';
-import { s__ } from '../locale';
-import PersistentUserCallout from '../persistent_user_callout';
-import initSettingsPanels from '../settings_panels';
+import Poll from '~/lib/utils/poll';
+import { s__ } from '~/locale';
+import PersistentUserCallout from '~/persistent_user_callout';
+import initSettingsPanels from '~/settings_panels';
 import RemoveClusterConfirmation from './components/remove_cluster_confirmation.vue';
 import ClustersService from './services/clusters_service';
 import ClustersStore from './stores/clusters_store';
diff --git a/app/assets/javascripts/confidential_merge_request/components/project_form_group.vue b/app/assets/javascripts/confidential_merge_request/components/project_form_group.vue
index 5906616296026a52b7eff8308b02e5c589ed2e92..622fd1e381a0526011e5e68cd2e7318f380b8ac4 100644
--- a/app/assets/javascripts/confidential_merge_request/components/project_form_group.vue
+++ b/app/assets/javascripts/confidential_merge_request/components/project_form_group.vue
@@ -1,8 +1,8 @@
 <script>
 import { GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
 import createFlash from '~/flash';
-import Api from '../../api';
-import { __ } from '../../locale';
+import Api from '~/api';
+import { __ } from '~/locale';
 import state from '../state';
 import Dropdown from './dropdown.vue';
 
diff --git a/app/assets/javascripts/environments/mixins/environments_mixin.js b/app/assets/javascripts/environments/mixins/environments_mixin.js
index 0f9741784d61a97c2997824dc4543dcdf9e8c00b..8957a3074ede7c0d543b0d12968a3a1c0ea19892 100644
--- a/app/assets/javascripts/environments/mixins/environments_mixin.js
+++ b/app/assets/javascripts/environments/mixins/environments_mixin.js
@@ -4,11 +4,11 @@
 import { isEqual, isFunction, omitBy } from 'lodash';
 import Visibility from 'visibilityjs';
 import createFlash from '~/flash';
-import Poll from '../../lib/utils/poll';
-import { getParameterByName } from '../../lib/utils/url_utility';
-import { s__, __ } from '../../locale';
-import tabs from '../../vue_shared/components/navigation_tabs.vue';
-import tablePagination from '../../vue_shared/components/pagination/table_pagination.vue';
+import Poll from '~/lib/utils/poll';
+import { getParameterByName } from '~/lib/utils/url_utility';
+import { s__, __ } from '~/locale';
+import tabs from '~/vue_shared/components/navigation_tabs.vue';
+import tablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
 import container from '../components/container.vue';
 import environmentTable from '../components/environments_table.vue';
 import eventHub from '../event_hub';
diff --git a/app/assets/javascripts/feature_highlight/feature_highlight_helper.js b/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
index 747f368b671431d745e82ab6f154d46265b8c1e4..b26a96499ba627226190b3614e026b5e805a4ced 100644
--- a/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
+++ b/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
@@ -1,6 +1,6 @@
 import createFlash from '~/flash';
-import axios from '../lib/utils/axios_utils';
-import { __ } from '../locale';
+import axios from '~/lib/utils/axios_utils';
+import { __ } from '~/locale';
 
 export const getSelector = (highlightId) => `.js-feature-highlight[data-highlight=${highlightId}]`;
 
diff --git a/app/assets/javascripts/groups/components/group_folder.vue b/app/assets/javascripts/groups/components/group_folder.vue
index 5f169832ee4d3eda877282bf904499a0d3a507e6..042d818338a6825add8024ac72ee1c480e58e2ef 100644
--- a/app/assets/javascripts/groups/components/group_folder.vue
+++ b/app/assets/javascripts/groups/components/group_folder.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlIcon } from '@gitlab/ui';
-import { n__ } from '../../locale';
+import { n__ } from '~/locale';
 import { MAX_CHILDREN_COUNT } from '../constants';
 
 export default {
diff --git a/app/assets/javascripts/groups/constants.js b/app/assets/javascripts/groups/constants.js
index 005bac1e7b5cd2505e4d70e4fec665310358319d..cacba2dfd235c877fe87b7bd76dd378e02e041a7 100644
--- a/app/assets/javascripts/groups/constants.js
+++ b/app/assets/javascripts/groups/constants.js
@@ -1,4 +1,4 @@
-import { __, s__ } from '../locale';
+import { __, s__ } from '~/locale';
 
 export const MAX_CHILDREN_COUNT = 20;
 
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue b/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
index 8f0e5aef4564946764ee09c8b343b9e151be7593..2799ea1378e89e10f452f418837a12d493ef5e85 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlIcon, GlPopover } from '@gitlab/ui';
-import { __, sprintf } from '../../../locale';
+import { __, sprintf } from '~/locale';
 import { MAX_TITLE_LENGTH, MAX_BODY_LENGTH } from '../../constants';
 
 export default {
diff --git a/app/assets/javascripts/ide/components/jobs/detail.vue b/app/assets/javascripts/ide/components/jobs/detail.vue
index 55ae5501cdb4a7f4121a37d5d709ea949d5ad968..8d6a0b99e0c1c5ba6caddf176a1eb211f022cccb 100644
--- a/app/assets/javascripts/ide/components/jobs/detail.vue
+++ b/app/assets/javascripts/ide/components/jobs/detail.vue
@@ -2,7 +2,7 @@
 import { GlTooltipDirective, GlButton, GlIcon, GlSafeHtmlDirective } from '@gitlab/ui';
 import { throttle } from 'lodash';
 import { mapActions, mapState } from 'vuex';
-import { __ } from '../../../locale';
+import { __ } from '~/locale';
 import JobDescription from './detail/description.vue';
 import ScrollButton from './detail/scroll_button.vue';
 
diff --git a/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue b/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue
index 6e1929a1948b331fe5be7134051f902c02ccf76a..bcbc68421c2968269b0c3a315af727447164d9da 100644
--- a/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue
+++ b/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
-import { __ } from '../../../../locale';
+import { __ } from '~/locale';
 
 const directions = {
   up: 'up',
diff --git a/app/assets/javascripts/ide/stores/actions/tree.js b/app/assets/javascripts/ide/stores/actions/tree.js
index f46d3cbe94665a500d2abf35c02df96a7c83998c..20d8dc3381d11343c1058760f14d739660f45edd 100644
--- a/app/assets/javascripts/ide/stores/actions/tree.js
+++ b/app/assets/javascripts/ide/stores/actions/tree.js
@@ -5,7 +5,7 @@ import {
   WEBIDE_MARK_FETCH_FILES_START,
 } from '~/performance/constants';
 import { performanceMarkAndMeasure } from '~/performance/utils';
-import { __ } from '../../../locale';
+import { __ } from '~/locale';
 import { decorateFiles } from '../../lib/files';
 import service from '../../services';
 import * as types from '../mutation_types';
diff --git a/app/assets/javascripts/ide/stores/modules/commit/getters.js b/app/assets/javascripts/ide/stores/modules/commit/getters.js
index 05e3601f3815ffeb2304bec433fe270467f5effb..0e7254e67bed482655f004a408bbe6e3667ed69a 100644
--- a/app/assets/javascripts/ide/stores/modules/commit/getters.js
+++ b/app/assets/javascripts/ide/stores/modules/commit/getters.js
@@ -1,4 +1,4 @@
-import { __ } from '../../../../locale';
+import { __ } from '~/locale';
 import { COMMIT_TO_NEW_BRANCH } from './constants';
 
 const BRANCH_SUFFIX_COUNT = 5;
diff --git a/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js b/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js
index 8446b93d14a683ca5ab8279cd92c25d80e3e20d8..3408245b245dd448c8ad8239f69b13b30603f603 100644
--- a/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js
@@ -1,5 +1,5 @@
-import Api from '../../../../api';
-import { __ } from '../../../../locale';
+import Api from '~/api';
+import { __ } from '~/locale';
 import { scopes } from './constants';
 import * as types from './mutation_types';
 
diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/actions.js b/app/assets/javascripts/ide/stores/modules/pipelines/actions.js
index 51872993f16ba42845fb922a7fc2873f31f4eecb..62476b7fc63973abaa9c30b2fb4acfa896ac33dd 100644
--- a/app/assets/javascripts/ide/stores/modules/pipelines/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/pipelines/actions.js
@@ -1,8 +1,8 @@
 import axios from 'axios';
 import Visibility from 'visibilityjs';
-import httpStatus from '../../../../lib/utils/http_status';
-import Poll from '../../../../lib/utils/poll';
-import { __ } from '../../../../locale';
+import httpStatus from '~/lib/utils/http_status';
+import Poll from '~/lib/utils/poll';
+import { __ } from '~/locale';
 import { rightSidebarViews } from '../../../constants';
 import service from '../../../services';
 import * as types from './mutation_types';
diff --git a/app/assets/javascripts/import_entities/constants.js b/app/assets/javascripts/import_entities/constants.js
index 156e92e2d00e69c008b7619c28d6f5f2eaed9c3a..1ab5413a5cc2fe101defaec626950bdfbff60aa4 100644
--- a/app/assets/javascripts/import_entities/constants.js
+++ b/app/assets/javascripts/import_entities/constants.js
@@ -1,4 +1,4 @@
-import { __ } from '../locale';
+import { __ } from '~/locale';
 
 // The `scheduling` status is only present on the client-side,
 // it is used as the status when we are requesting to start an import.
diff --git a/app/assets/javascripts/jobs/components/environments_block.vue b/app/assets/javascripts/jobs/components/environments_block.vue
index 9d451f94e8a2ef8d202a7cf406a41e9c7a88ee24..da72cbeb8562f1f7de9386be34119557e4928f0b 100644
--- a/app/assets/javascripts/jobs/components/environments_block.vue
+++ b/app/assets/javascripts/jobs/components/environments_block.vue
@@ -2,7 +2,7 @@
 import { GlSprintf, GlLink } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
-import { __ } from '../../locale';
+import { __ } from '~/locale';
 
 export default {
   creatingEnvironment: 'creating',
diff --git a/app/assets/javascripts/lib/utils/datetime/date_calculation_utility.js b/app/assets/javascripts/lib/utils/datetime/date_calculation_utility.js
index 8dbadbe4bfc46a2dd81763a3743b49706098e91d..4e7086e62c5da1d7da6261fa61c1c6b3255117c8 100644
--- a/app/assets/javascripts/lib/utils/datetime/date_calculation_utility.js
+++ b/app/assets/javascripts/lib/utils/datetime/date_calculation_utility.js
@@ -1,5 +1,5 @@
 import { isNumber } from 'lodash';
-import { __, n__ } from '../../../locale';
+import { __, n__ } from '~/locale';
 import { getDayName, parseSeconds } from './date_format_utility';
 
 const DAYS_IN_WEEK = 7;
diff --git a/app/assets/javascripts/lib/utils/datetime/date_format_utility.js b/app/assets/javascripts/lib/utils/datetime/date_format_utility.js
index 8b048cd51dd325704cec6e48967f52501097542c..830f46043826b7f9b5e43a71feb39851ee1d80d6 100644
--- a/app/assets/javascripts/lib/utils/datetime/date_format_utility.js
+++ b/app/assets/javascripts/lib/utils/datetime/date_format_utility.js
@@ -2,7 +2,7 @@ import dateFormat from 'dateformat';
 import { isString, mapValues, reduce, isDate, unescape } from 'lodash';
 import { roundToNearestHalf } from '~/lib/utils/common_utils';
 import { sanitize } from '~/lib/dompurify';
-import { s__, n__, __, sprintf } from '../../../locale';
+import { s__, n__, __, sprintf } from '~/locale';
 
 /**
  * Returns i18n month names array.
diff --git a/app/assets/javascripts/lib/utils/datetime/timeago_utility.js b/app/assets/javascripts/lib/utils/datetime/timeago_utility.js
index 2b898d8b6a51ec281c073e2c1b4ad9419e861f88..095a29a2effb51e6a4abf4dd5954c66038412669 100644
--- a/app/assets/javascripts/lib/utils/datetime/timeago_utility.js
+++ b/app/assets/javascripts/lib/utils/datetime/timeago_utility.js
@@ -1,5 +1,5 @@
 import * as timeago from 'timeago.js';
-import { languageCode, s__, createDateTimeFormat } from '../../../locale';
+import { languageCode, s__, createDateTimeFormat } from '~/locale';
 import { formatDate } from './date_format_utility';
 
 /**
diff --git a/app/assets/javascripts/monitoring/stores/actions.js b/app/assets/javascripts/monitoring/stores/actions.js
index 7b9680aece12a8ea5dfbc9112628e218c1626015..5c99dbc0d982d4040bafba7546aaa4d9542ba433 100644
--- a/app/assets/javascripts/monitoring/stores/actions.js
+++ b/app/assets/javascripts/monitoring/stores/actions.js
@@ -2,8 +2,8 @@ import * as Sentry from '@sentry/browser';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { convertToFixedRange } from '~/lib/utils/datetime_range';
-import { convertObjectPropsToCamelCase } from '../../lib/utils/common_utils';
-import { s__, sprintf } from '../../locale';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import { s__, sprintf } from '~/locale';
 import { ENVIRONMENT_AVAILABLE_STATE, OVERVIEW_DASHBOARD_PATH, VARIABLE_TYPES } from '../constants';
 import trackDashboardLoad from '../monitoring_tracking_helper';
 import getAnnotations from '../queries/get_annotations.query.graphql';
diff --git a/app/assets/javascripts/network/branch_graph.js b/app/assets/javascripts/network/branch_graph.js
index 71894b4ff3ea38f386330ffcc67add7f1d8d3915..5ae68d22667f38f91a9897c9de485c569c2bb345 100644
--- a/app/assets/javascripts/network/branch_graph.js
+++ b/app/assets/javascripts/network/branch_graph.js
@@ -1,8 +1,8 @@
 /* eslint-disable func-names, consistent-return */
 
 import $ from 'jquery';
-import axios from '../lib/utils/axios_utils';
-import { __ } from '../locale';
+import axios from '~/lib/utils/axios_utils';
+import { __ } from '~/locale';
 import Raphael from './raphael';
 
 export default class BranchGraph {
diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
index a271ac91f6ee9490fa9003bc4a9ad97a10cd5b01..5b0d581f026c579517eb81bff44084aa487a0299 100644
--- a/app/assets/javascripts/notes/components/noteable_note.vue
+++ b/app/assets/javascripts/notes/components/noteable_note.vue
@@ -10,8 +10,8 @@ import httpStatusCodes from '~/lib/utils/http_status';
 import { ignoreWhilePending } from '~/lib/utils/ignore_while_pending';
 import { truncateSha } from '~/lib/utils/text_utility';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
-import { __, s__, sprintf } from '../../locale';
-import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
+import { __, s__, sprintf } from '~/locale';
+import userAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import eventHub from '../event_hub';
 import noteable from '../mixins/noteable';
 import resolvable from '../mixins/resolvable';
diff --git a/app/assets/javascripts/pages/admin/application_settings/payload_downloader.js b/app/assets/javascripts/pages/admin/application_settings/payload_downloader.js
index 67eee2c3209bbe6b0f06f0466524ec8fc0cdbe38..7c81cf80dc68caa51d20b1a5b62c2e9c2d9d163f 100644
--- a/app/assets/javascripts/pages/admin/application_settings/payload_downloader.js
+++ b/app/assets/javascripts/pages/admin/application_settings/payload_downloader.js
@@ -1,6 +1,6 @@
 import createFlash from '~/flash';
-import axios from '../../../lib/utils/axios_utils';
-import { __ } from '../../../locale';
+import axios from '~/lib/utils/axios_utils';
+import { __ } from '~/locale';
 
 export default class PayloadDownloader {
   constructor(trigger) {
diff --git a/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js b/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js
index c017cf0afa2cc22d87be0c77fa2ef1e7470e730d..ae08806fe4caaac5d7023a1f460fb70c08dd1b96 100644
--- a/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js
+++ b/app/assets/javascripts/pages/admin/application_settings/payload_previewer.js
@@ -1,6 +1,6 @@
 import createFlash from '~/flash';
-import axios from '../../../lib/utils/axios_utils';
-import { __ } from '../../../locale';
+import axios from '~/lib/utils/axios_utils';
+import { __ } from '~/locale';
 
 export default class PayloadPreviewer {
   constructor(trigger) {
diff --git a/app/assets/javascripts/pipelines/stores/test_reports/utils.js b/app/assets/javascripts/pipelines/stores/test_reports/utils.js
index 63a587989589b5af8949b382dd151f73c50afc59..6b616601bc52ad26538e606f0c9cd94f99545c51 100644
--- a/app/assets/javascripts/pipelines/stores/test_reports/utils.js
+++ b/app/assets/javascripts/pipelines/stores/test_reports/utils.js
@@ -1,4 +1,4 @@
-import { __, sprintf } from '../../../locale';
+import { __, sprintf } from '~/locale';
 import { TestStatus } from '../../constants';
 
 /**
diff --git a/app/assets/javascripts/repository/components/breadcrumbs.vue b/app/assets/javascripts/repository/components/breadcrumbs.vue
index bc9f82d985bbd35c80db4bc6c3d0975fb9223aaa..84c9f9d0bbed98ba192616fd6edd97629e148eb3 100644
--- a/app/assets/javascripts/repository/components/breadcrumbs.vue
+++ b/app/assets/javascripts/repository/components/breadcrumbs.vue
@@ -9,7 +9,7 @@ import {
 } from '@gitlab/ui';
 import permissionsQuery from 'shared_queries/repository/permissions.query.graphql';
 import { joinPaths, escapeFileUrl } from '~/lib/utils/url_utility';
-import { __ } from '../../locale';
+import { __ } from '~/locale';
 import getRefMixin from '../mixins/get_ref';
 import projectPathQuery from '../queries/project_path.query.graphql';
 import projectShortPathQuery from '../queries/project_short_path.query.graphql';
diff --git a/app/assets/javascripts/repository/components/table/index.vue b/app/assets/javascripts/repository/components/table/index.vue
index 0a2ed753e38fbf0b873d137783b6ae2e7c0d0aa5..c2323d6b286f879388090ab3072bbee82df6e2a9 100644
--- a/app/assets/javascripts/repository/components/table/index.vue
+++ b/app/assets/javascripts/repository/components/table/index.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlDeprecatedSkeletonLoading as GlSkeletonLoading, GlButton } from '@gitlab/ui';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { sprintf, __ } from '../../../locale';
+import { sprintf, __ } from '~/locale';
 import getRefMixin from '../../mixins/get_ref';
 import projectPathQuery from '../../queries/project_path.query.graphql';
 import TableHeader from './header.vue';
diff --git a/app/assets/javascripts/repository/components/tree_content.vue b/app/assets/javascripts/repository/components/tree_content.vue
index 130ebf773619f7429dae373f9d2958a11b2e85d0..2200e999c7511534b3b5d04e30d5172db7acd487 100644
--- a/app/assets/javascripts/repository/components/tree_content.vue
+++ b/app/assets/javascripts/repository/components/tree_content.vue
@@ -2,7 +2,7 @@
 import paginatedTreeQuery from 'shared_queries/repository/paginated_tree.query.graphql';
 import createFlash from '~/flash';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { __ } from '../../locale';
+import { __ } from '~/locale';
 import {
   TREE_PAGE_SIZE,
   TREE_INITIAL_FETCH_COUNT,
diff --git a/app/assets/javascripts/serverless/components/missing_prometheus.vue b/app/assets/javascripts/serverless/components/missing_prometheus.vue
index 0023c64e3e4394d572f7e8072256349377991be5..d9e6bb5009e38e4f026c2a5a58b87698f02a1a35 100644
--- a/app/assets/javascripts/serverless/components/missing_prometheus.vue
+++ b/app/assets/javascripts/serverless/components/missing_prometheus.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlButton, GlLink } from '@gitlab/ui';
 import { mapState } from 'vuex';
-import { s__ } from '../../locale';
+import { s__ } from '~/locale';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue b/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
index 42d2e456a0743d1f99f4e13796d3b497b1af1ab5..2ab46a7a655fa487ff00ccaf9da976de7c390c30 100644
--- a/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
+++ b/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
@@ -3,7 +3,7 @@ import { GlButton } from '@gitlab/ui';
 import $ from 'jquery';
 import { mapActions } from 'vuex';
 import createFlash from '~/flash';
-import { __, sprintf } from '../../../locale';
+import { __, sprintf } from '~/locale';
 import eventHub from '../../event_hub';
 
 export default {
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue b/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue
index bb90ef8e44444c5b18686dcc26c2ce3fee29f969..91c15061fb9c5c11dc2055d3deff606a726b6230 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlButton, GlSafeHtmlDirective } from '@gitlab/ui';
 import { joinPaths } from '~/lib/utils/url_utility';
-import { sprintf, s__ } from '../../../locale';
+import { sprintf, s__ } from '~/locale';
 
 export default {
   name: 'TimeTrackingHelpState',
diff --git a/app/assets/javascripts/users_select/index.js b/app/assets/javascripts/users_select/index.js
index 656c851aa3d3666c55682b106243a11f53c08f98..777c314fa1c8bad07246ffc257fe11e2ba1d30b0 100644
--- a/app/assets/javascripts/users_select/index.js
+++ b/app/assets/javascripts/users_select/index.js
@@ -11,10 +11,10 @@ import {
 import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 import { isUserBusy } from '~/set_status_modal/utils';
 import { fixTitle, dispose } from '~/tooltips';
-import axios from '../lib/utils/axios_utils';
-import { parseBoolean, spriteIcon } from '../lib/utils/common_utils';
-import { loadCSSFile } from '../lib/utils/css_utils';
-import { s__, __, sprintf } from '../locale';
+import axios from '~/lib/utils/axios_utils';
+import { parseBoolean, spriteIcon } from '~/lib/utils/common_utils';
+import { loadCSSFile } from '~/lib/utils/css_utils';
+import { s__, __, sprintf } from '~/locale';
 import { getAjaxUsersSelectOptions, getAjaxUsersSelectParams } from './utils';
 
 // TODO: remove eventHub hack after code splitting refactor
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue b/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue
index caafd6b995e2807faa88095a7c7a0299149ec895..e86724d133a3689e8ac030ecf87e6a0d42f1834c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
-import { __ } from '../../locale';
+import { __ } from '~/locale';
 
 export default {
   i18n: {
diff --git a/app/assets/javascripts/vue_shared/components/header_ci_component.vue b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
index 9bff469b6701dd2cac0fe66ea2e948351fcbf0f7..2622bdfb8cb0a9b2c5d6ced6d3c18f56dfb35719 100644
--- a/app/assets/javascripts/vue_shared/components/header_ci_component.vue
+++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
@@ -8,8 +8,8 @@ import {
   GlTooltip,
 } from '@gitlab/ui';
 import { isGid, getIdFromGraphQLId } from '~/graphql_shared/utils';
-import { glEmojiTag } from '../../emoji';
-import { __, sprintf } from '../../locale';
+import { glEmojiTag } from '~/emoji';
+import { __, sprintf } from '~/locale';
 import CiIconBadge from './ci_badge_link.vue';
 import TimeagoTooltip from './time_ago_tooltip.vue';
 
diff --git a/app/assets/javascripts/vue_shared/translate.js b/app/assets/javascripts/vue_shared/translate.js
index 616848639f1cd0a96bd289ed4280c4416db4f971..bc1f886526173ef29ffe7cfe5ac5c528964865a5 100644
--- a/app/assets/javascripts/vue_shared/translate.js
+++ b/app/assets/javascripts/vue_shared/translate.js
@@ -1,4 +1,4 @@
-import { __, n__, s__, sprintf } from '../locale';
+import { __, n__, s__, sprintf } from '~/locale';
 
 export default (Vue) => {
   Vue.mixin({