Where vue-cli-service put the bundle files? - vue.js

I am trying to debug a Vue application and all I have is vue-cli-service-serve which does not give me any information about what it does.
I would like to access the public folder. Where can I find it?
I have this vue.config.js:
const CopyPlugin = require('copy-webpack-plugin')
module.exports = {
pages: {
index: {
entry: 'src/index.js',
template: 'public/index.html',
filename: 'index.html'
}
},
devServer: {
clientLogLevel: 'warning',
hot: true,
contentBase: 'dist',
compress: true,
open: true,
overlay: { warnings: false, errors: true },
publicPath: '/',
quiet: true,
watchOptions: {
poll: false,
ignored: /node_modules/
}
},
chainWebpack: config => {
config.plugins.delete('prefetch-index'),
config.module
.rule('vue')
.use('vue-loader')
.tap(args => {
args.compilerOptions.whitespace = 'preserve'
})
},
productionSourceMap: false,
assetsDir: './assets/',
configureWebpack: {
plugins: [
new CopyPlugin({
patterns: [
{ from: 'src/assets/img', to: 'assets/img' },
{ from: 'src/assets/logos', to: 'assets/logos' },
{ from: 'src/assets/fonts', to: 'assets/fonts' }
],
}),
]
}
}

Related

moduleNameMapper in jest.config.cjs is not working?

File Structure:
public
- assets
src
other file
Svelte.config.js
resolve: {
alias: {
"#": resolve(__dirname, "src"),
$assets: resolve(__dirname, "public/assets"),
},
},
Jest.config.cjs
const sveltePreprocess = require("svelte-preprocess");
module.exports = {
transform: {
"^.+\\.svelte$": ["svelte-jester", [sveltePreprocess()]],
"^.+\\.js$": "babel-jest",
"^.+\\.(png|svg)$": "<rootDir>/svgTransform.js",
},
moduleFileExtensions: ["js", "svelte"],
bail: false,
verbose: true,
testPathIgnorePatterns: ["node_modules"],
transformIgnorePatterns: ["node_modules"],
moduleDirectories: ["node_modules"],
setupFilesAfterEnv: ["#testing-library/jest-dom/extend-expect"],
moduleNameMapper: {
"#/(.*)$": "<rootDir>/src/$1",
"$assets/(.*)$": "<rootDir>/public/assets/$1",
},
setupFiles: ["<rootDir>/setupTests.js"],
testResultsProcessor: "jest-sonar-reporter",
testTimeout: 30000,
testEnvironment: "jsdom",
};
Usage:
import SvgClose from "$assets/svg/close.svg";
Error:
Cannot find module '$assets/svg/close.svg' from 'src/components/atoms/Modal.svelte'
# work fine but $assets not working .
What changes I should do in jest.config.cjs
or I am Missing something?

NUXT does not optimize static site

I have a project in NUXT js and I want to generate a static website.
It does work, but does not optimize it: does not extract the css in a single file with build.extractCSS for example.
Is it something related to the static mode?
I also try some other optimization but they don't seems to work either.
Here my config:
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
target: process.env.NODE_TARGET === 'static' ? 'static' : 'server',
router: {
base: '/myRoute/',
routeNameSplitter: '/'
},
server: {
host: "localhost" // default: localhost
},
head: {
titleTemplate: 'myProject',
title: 'myProject',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' }
],
link: [
{
hid: 'icon',
rel: 'icon',
type: 'image/png',
href: '/favicon.png'
}
]
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
'~/assets/css/custom.css'
],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/typescript
'#nuxt/typescript-build',
// https://go.nuxtjs.dev/vuetify
['#nuxtjs/vuetify', { treeShake: true }],
"#nuxtjs/svg",
'vue-social-sharing/nuxt'
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/axios
'#nuxtjs/axios',
// https://go.nuxtjs.dev/pwa
'#nuxtjs/pwa',
],
pageTransition: {
name: 'slide-fade',
mode: 'out-in'
},
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {},
env: {
NUXT_ENV_API_HOST: process.env.NUXT_ENV_API_HOST,
},
// PWA module configuration: https://go.nuxtjs.dev/pwa
pwa: {
meta: {
/* meta options */
theme_color: "#27363B"
},
manifest: {
lang: 'en'
}
},
// Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
vuetify: {
optionsPath: './vuetify.options.js',
customVariables: ['~/assets/variables.scss'],
treeShake: true,
// defaultAssets: false,
},
// Build Configuration: https://go.nuxtjs.dev/config-build
// optimizeCSS: true,
// extractCSS: true,
build: {
analyze: {
analyzerMode: 'static'
},
html: {
minify: {
collapseBooleanAttributes: true,
decodeEntities: true,
minifyCSS: true,
minifyJS: true,
processConditionalComments: true,
removeEmptyAttributes: true,
removeRedundantAttributes: true,
trimCustomFragments: true,
useShortDoctype: true,
minifyURLs: true,
removeComments: true,
removeEmptyElements: true
}
},
optimizeCSS: true,
extractCSS: true,
terser: {
parallel: true,
cache: false,
sourceMap: false,
extractComments: {
filename: 'LICENSES'
},
terserOptions: {
mangle: true,
output: {
comments: /^\**!|#preserve|#license|#cc_on/
}
}
},
babel: {
plugins: [
["#babel/plugin-proposal-private-property-in-object", { "loose": true }]
]
},
extend(config, { isDev, isClient }) {
config.module.rules.push({
test: /\.(obj|mtl|fbx|gltf|glb|hdr|bin)$/,
loader: 'file-loader'
})
},
transpile: [
"three"
]
},
}

Nuxt console.log() does not work although I set it in .eslintrc.js

I have a Nuxt application with .eslintrc.js file where I set up
rules: {
"no-console": "off"
},
I expect it enables the console methods and I would be able to write to console. But it is still blocked. I dont know where else to set this option. nuxt.config.js does not contain lint section. thnakx for any help.
EDIT: Here is the nuxt.config.js
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: "lurity-portal-nuxt",
htmlAttrs: {
lang: "en",
},
meta: [
{ charset: "utf-8" },
{
name: "viewport",
content: "width=device-width, initial-scale=1",
},
{ hid: "description", name: "description", content: "" },
{ name: "format-detection", content: "telephone=no" },
],
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
},
server: {
port: process.env.PORT, // default: 3000
host: process.env.HOST, // default: localhost
},
modern: true,
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
"#mdi/font/css/materialdesignicons.css",
"#/assets/scss/bulma_styled.scss",
"#/assets/scss/lurity.scss",
],
router: {
middleware: "auth",
},
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
"~/plugins/helpers.js",
"~/plugins/apiCalls.js",
"~/plugins/vue-lazyload.client.js",
{ src: "~/plugins/vue-intersect.client.js", mode: "client" },
{ src: "~/plugins/gmaps.client.js", mode: "client" },
{ src: "~/plugins/google-auth.client.js", mode: "client" },
{ src: "~/plugins/google-tag-manager.client.js", mode: "client" },
{ src: "~/plugins/debounce.client.js", mode: "client" },
{ src: "~/plugins/braintree.client.js", mode: "client" },
{ src: "~/plugins/charts.client.js", mode: "client" },
{ src: "~/plugins/vuex-persist.client.js", mode: "client" },
{ src: "~plugins/leaflet.client.js", mode: "client" },
"~/plugins/map-location.js",
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/eslint
"#nuxtjs/eslint-module",
"#nuxtjs/composition-api/module",
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/buefy
"nuxt-buefy",
// https://go.nuxtjs.dev/axios
"#nuxtjs/axios",
"#nuxtjs/proxy",
[
"nuxt-i18n",
{
locales: [
{
code: "en",
iso: "en-GB",
file: "en_locale.js",
},
{
code: "sk",
iso: "sk-SK",
file: "sk_locale.js",
},
{
code: "cz",
iso: "cs-CZ",
file: "cs_locale.js",
},
],
defaultLocale: "en",
strategy: "no_prefix",
lazy: true,
vueI18n: {
silentTranslationWarn: true,
silentFallbackWarn: true,
},
langDir: "locales/",
// Enable browser language detection to automatically redirect user
// to their preferred language as they visit your app for the first time
// Set to false to disable
detectBrowserLanguage: {
// If enabled, a cookie is set once a user has been redirected to his
// preferred language to prevent subsequent redirections
// Set to false to redirect every time
useCookie: true,
// Cookie name
cookieKey: "i18n_redirected",
// Set to always redirect to value stored in the cookie, not just once
alwaysRedirect: false,
// If no locale for the browsers locale is a match, use this one as a fallback
fallbackLocale: "en",
},
},
],
],
buefy: { css: false, materialDesignIcons: false, defaultLocale: "sk-SK" },
proxy: {
// Simple proxy
"/api": {
target: `https://portal-api.lurity.com`,
},
},
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
proxy: true,
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
transpile: ["vuex-stores"],
loaders: {
scss: {
sourceMap: true,
implementation: require("sass"),
additionalData: `#import "~#/assets/scss/_bulma_variables.scss"; #import "~#/assets/scss/variables.scss";`,
},
},
},
};

Why do I get an SSR encoding error in Nuxt JS when trying to add a custom class to the body element?

I'm facing an SSR encoding error in a Nuxt project, essentially what I'm trying to achieve is adding a custom class to the body element for a specific page.
Here's the implemented chunk of code:
export default {
components: {
PortfolioHeader,
Footer
},
head: {
bodyAttrs: {
class: 'portfolio'
},
script: [
{
src: 'http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'
}
]
},
data() {
return {
apiURL: this.$config.apiUrl,
currentPortfolio: this.$store.state.portfolios.filter( portfolio => portfolio.title.toLowerCase() === 'busvel' )[0]
}
}
}
An this is what I get in the DOM generated code:
<body class="" data-n-head="%7B%22class%22:%7B%22ssr%22:%22%22%7D%7D" cz-shortcut-listen="true">
This is my nuxt.config.js:
export default {
mode: "universal",
target: "server",
dev: process.env.APP_ENV !== "production",
vue: {
config: {
productionTip: true,
devtools: true
}
},
server: {
host: "0.0.0.0"
},
publicRuntimeConfig: {
baseUrl: process.env.BASE_URL || "http://localhost:3000",
apiUrl: process.env.API_URL || "http://localhost:1337"
},
head: {
title: process.env.npm_package_name || "",
meta: [
{ charset: "utf-8" },
{
name: "viewport",
content:
"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
},
{
hid: "description",
name: "description",
content: process.env.npm_package_description || ""
}
],
link: [
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
{ rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Mulish:wght#400;600;800;900&display=swap" }
]
},
css: ["slick-carousel/slick/slick.css"],
plugins: [
"#/plugins/vue-typed.js",
{ src: "~/plugins/vue-typed.js", mode: "server" },
{ src: "~/plugins/vue-slick.js", mode: "client" },
{ src: "~/plugins/vue-parallax.js", mode: "client" }
],
components: true,
buildModules: ["nuxt-gsap"],
modules: [
// Doc: https://bootstrap-vue.js.org
"bootstrap-vue/nuxt",
"#nuxtjs/axios",
"#nuxtjs/style-resources",
"#nuxtjs/proxy"
],
bootstrapVue: {
bootstrapCSS: false,
bootstrapVueCSS: false
},
styleResources: {
scss: ["~assets/scss/_colors.scss", "~assets/scss/_bootstrap.scss"]
},
build: {
devtools: true,
html: {
minify: {
minifyCSS: process.env.APP_ENV === "production" ? true : false,
minifyJS: process.env.APP_ENV === "production" ? true : false
}
},
optimization: {
minimize: process.env.APP_ENV === "production" ? true : false
},
postcss: {
sourceMap: true
},
loaders: {
css: {
sourceMap: true
},
scss: {
sourceMap: true,
sassOptions: {
outputStyle: "compressed"
}
}
},
extend(config, ctx) {
if (ctx.isClient) {
config.devtool = "#source-map";
}
}
}
};
Please help me out if you've already faced this problem or if you know the cause of this bug.

Webpack unable to find the correct modules

I cannot figure out why the paths are so wrong when finding node modules. Here's my /webpack-dev-server.js
const chalk = require('chalk');
const webpack = require('webpack');
const env = require('../server/environment');
const WebpackDevServer = require('webpack-dev-server');
const webpackConfig = require('./webpack.config.development.js');
const server = new WebpackDevServer(webpack(webpackConfig), {
publicPath: '/client',
contentBase: '/client',
inline: true,
hot: true,
compress: true,
stats: false,
quiet: true,
noInfo: true,
lazy: false,
historyApiFallback: true,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'X-Requested-With'
},
proxy: {
"*": 'http://localhost:3000'
}
});
server.listen(env.WEBPACK_PORT, 'localhost', (err) => {
if (err) {
console.log(chalk.red(err));
}
console.log(chalk.yellow(`Webpack server listening on http://localhost:${env.WEBPACK_PORT}`));
});
which includes the basic webpack development setup. When I start up the webpack-dev-server above, I get the following error in the console:
AppContainer.scss?048e:4Uncaught Error: Cannot find module "!!./../../../node_modules/css-loader/index.js?modules!./../../../node_modules/autoprefixer-loader/index.js!./../../../node_modules/sass-loader/index.js!./AppContainer.scss"
I see the paths to the node_modules are incorrect. What's strange is that if I run an Express server and simply require the webpack-dev-server it works...
Here's my webpack config:
import path from 'path';
import webpack from 'webpack';
import env from '../server/environment';
export default {
target: 'web',
devtool: 'cheap-module-eval-source-map',
entry: [
`webpack-dev-server/client?http://localhost:${env.WEBPACK_PORT}`,
'webpack/hot/dev-server',
'babel-polyfill',
'./client/index'
],
output: {
path: path.join(__dirname, '../client'),
pathInfo: true,
publicPath: `http://localhost:${env.WEBPACK_PORT}/client/`,
filename: 'index.js'
},
resolve: {
root: path.join(__dirname, '..'),
modulesDirectories: [
'node_modules',
'client'
],
extensions: ['', '.json', '.js']
},
plugins: [
new webpack.DefinePlugin({
__DEV__: env.isDev,
__PRODUCTION__: env.isProd,
__TOKEN_KEY__: JSON.stringify(env.TOKEN_KEY),
__ENV__: JSON.stringify(env.ENV)
}),
new webpack.HotModuleReplacementPlugin()
],
module: {
noParse: /\.min\.js/,
loaders: [
{ test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file' },
{ test: /\.(woff|woff2)$/, loader: 'file-loader?prefix=font/&limit=5000' },
{
test: /\.ttf(\?v=\d+.\d+.\d+)?$/,
loader: 'file-loader?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.svg(\?v=\d+.\d+.\d+)?$/,
loader: 'file-loader?limit=10000&mimetype=image/svg+xml'
},
{ test: /\.(jpe?g|png|gif)$/i, loaders: ['file'] },
{ test: /\.ico$/, loader: 'file-loader?name=[name].[ext]' },
{ test: /\.json$/, loader: 'json' },
{ test: /\.scss$/, loader: 'style!css?modules!autoprefixer!sass' },
{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
exclude: /node_modules/
}
]
}
};
I needed to correctly extend the base config class.