Just Me

держи для webpack 5. Вариант для прода

{
        test: /\.s?css$/,
          use: [
            MiniCssExtractPlugin.loader,
		    {loader: 'css-loader', options: {sourceMap: false }},		    
			{
				loader: 'postcss-loader',
				options: {
				  postcssOptions: {
					plugins: function () {
					  return [
						require('autoprefixer')
					  ];
					}
				  }
				}
			},
			'sass-loader'
          ]
      }

Правильно определённая проблема - вывод динамических скриптов в HTML с помощью JS. Варианты:

1) вставка во фрейм. Только не с помощью v-html, а для этого есть нативные js функции. То же самое можно сделать с помощью vue - плагина

2) вручную собрать тег script и вставить его в HTML

сокрытие эндпоинтов:

- невозможно
- в плане безопасности тебе ничего не даст

реализуй подгрузку скрытых данных по авторизации через jwt-токен. Этого будет достаточно

Делал приложение на Vue SPA (портал с играми, анкетами и т.д.), возникла проблема в следующем:

если на странице присутствуют динамические скрипты, то для их подгрузки на SPA надо строить большой велосипед - подгружать их во фрейм, где к ним теряется доступ Vue. Особенно, если эти скрипты подгружают ещё какие-то скрипты

в то время, как при стандартной перезагрузке MPA они просто вставляются в html

Запрети кеширование текущей HTML страницы прописав в ней:

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">

и проверь действительно ли app.css имеет разные имена при разных сборках на странице

сборка точно разная? сбрось кеширование для vue:

vue.config.js

chainWebpack: config => {				
	    if (process.env.NODE_ENV === 'production') {				
	      config.module.rule('vue').uses.delete('cache-loader');				
	      config.module.rule('js').uses.delete('cache-loader');				
	      config.module.rule('ts').uses.delete('cache-loader');				
	      config.module.rule('tsx').uses.delete('cache-loader');				
	    }				
	  }

если дело только во vue то так:

vue.config.js

chainWebpack: config => {			
	    if (process.env.NODE_ENV === 'production') {			
	      config.module.rule('vue').uses.delete('cache-loader');			
	      config.module.rule('js').uses.delete('cache-loader');			
	      config.module.rule('ts').uses.delete('cache-loader');			
	      config.module.rule('tsx').uses.delete('cache-loader');			
	    }			
	  }

https://forum.vuejs.org/t/disable-cache-loader-in-...

Есть ли способ решить проблему не прибегая к импорту axios напрямую?

Есть. Сделать axios, свойством глобального объекта window. Как собственно, обычно и делают.

import axios from 'axios'

window.axios = axios;

затем просто

const { token } = await axios.post('http://localhost:3000/login', formData);