import { getBaseUrl } from './utils/utils';
// eslint-disable-next-line nuxt/no-cjs-in-config
module.exports = {
ssr: true,
target: 'server',
},
loading: '~/components/Loading.vue',
/*
** Global CSS
*/
css: ['@/assets/style/base/reset.scss', '@/assets/style/base/utils.scss'],
styleResources: {
scss: [
'@/assets/style/base/color.scss',
'@/assets/style/base/variables.scss',
'@/assets/style/base/mixins.scss',
],
},
/*
** Plugins to load before mounting the App
** https://nuxtjs.org/guide/plugins
*/
plugins: [
'~/plugins/datadog',
{ src: '~/plugins/node-winston-logger', mode: 'server' },
{ src: '~/plugins/custom-logger' },
{ src: '~plugins/ga', mode: 'client' },
{ src: '~plugins/vue-awesome-swiper', mode: 'client' },
'~/plugins/amplitude',
'~/plugins/gtm',
'~/plugins/validate/index',
'~/plugins/directives/click_outside',
'~/plugins/directives/scroll',
'~/plugins/filters/formatNumber',
'~/plugins/axios',
'~/plugins/comento-ui',
{ src: '~/plugins/toast', mode: 'client' },
{ src: '~/plugins/quill', mode: 'client' },
'~/mixins/gtmMixin',
'~/mixins/windowMixin',
'~/mixins/commonMixin',
'~/mixins/localStorageIdMixin',
'~/api/api',
],
components: true,
buildModules: [
'@nuxtjs/dotenv',
'nuxt-vite',
],
vue: {
config: {
productionTip: false,
devtools: true,
},
},
polyfill: {
features: [
/*
Feature without detect:
Note:
This is not recommended for most polyfills
because the polyfill will always be loaded, parsed and executed.
*/
{
require: 'url-polyfill', // NPM package or require path of file
},
/*
Feature with detect:
Detection is better because the polyfill will not be
loaded, parsed and executed if it's not necessary.
*/
{
require: 'intersection-observer',
detect: () => 'IntersectionObserver' in window,
},
/*
Feature with detect & install:
Some polyfills require a installation step
Hence you could supply a install function which accepts the require result
*/
{
require: 'smoothscroll-polyfill',
// Detection found in source: https://github.com/iamdustan/smoothscroll/blob/master/src/smoothscroll.js
detect: () =>
'scrollBehavior' in document.documentElement.style && window.__forceSmoothScrollPolyfill__ !== true,
// Optional install function called client side after the package is required:
install: smoothscroll => smoothscroll.polyfill(),
},
],
},
modules: [
'@nuxtjs/gtm',
'@nuxtjs/axios',
'nuxt-polyfill',
'@nuxtjs/style-resources',
'cookie-universal-nuxt',
'@nuxtjs/svg',
'vue-scrollto/nuxt',
],
axios: {
// 모듈 설정
baseURL: getBaseUrl(),
headers: {
common: {
Accept: 'application/vnd.comento.v1+json',
},
},
credentials: true,
// axios 자동디버깅용
debug: true,
},
/*
** Build configuration
** See https://nuxtjs.org/api/configuration-build/
*/
build: {
transpile: ['vee-validate/dist/rules', 'vue-svg-loader', 'swiper', 'dom7'],
babel: {
presets({ envName }) {
const envTargets = {
client: { browsers: ['last 2 versions'], ie: 11 },
server: { node: 'current' },
};
return [
[
'@nuxt/babel-preset-app',
{
targets: envTargets[envName],
// buildTarget: envName,
corejs: { version: 3 },
// debug: true,
// usage 옵션은 코드를 분석하여, 필요한 폴리필을 자동 제공
useBuiltIns: 'usage',
},
],
];
},
},
extend(config, { isDev, isClient }) {
config.node = {
fs: 'empty',
};
if (isClient) {
config.devtool = isDev ? 'inline-source-map' : 'cheap-module-source-map';
}
// Run ESLint on save
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/,
});
}
const pngRule = config.module.rules.find(({ test }) => test.test('.png'));
pngRule.test = /\.(jpe?g|gif|webp)$/;
config.module.rules.push({
test: /\.(png|jpe?g|gif|webp)$/,
use: {
loader: 'file-loader',
options: {
name: 'assets/[name].[contenthash].[ext]',
outputPath: 'img',
esModule: false,
},
},
});
},
},
router: {
base: '/',
middleware: ['route-guard', 'route-meta'],
},
env: {
baseUrl: getBaseUrl(),
NODE_ENV: process.env.NODE_ENV,
},
};If I use '@' in the path, it can't find proper loader dealing with '.vue' file.
I need to replace the absolute path with the relative path. Is there anyway to keep my webpack config?
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent