I am very new to Vue.js, I am using the version 3.2.33
I have the following structure:
i18n |
|- config.json
public |
|- img
|- i18n
I would like to dynamically copy the config.json file in the public/i18n folder when running
vue-cli-service serve
I tried to add copy-webpack-plugin in my vue.config.js
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/pages/PoleUx/Foyer-Design-System-Vue/' : '/',
configureWebpack: {
plugins: [
new CopyWebpackPlugin({
patterns: [
{from: 'i18n/config.json', to: 'public/i18n/config.json'},
]
})
],
}
};
But the file wasn't available under the public folder of my app when running on local.
Related
I'm using Vue 3 cli version 4. I need help to configure my webpack.
My project will be on path for example /test, but I need to load my assets from path /vendor/test.
My fonts, scss are in folder /src/assets/fonts | /src/assets/scss
So I changed public path to /test and assetsDir to ../../vendor/test in vue.config.js.
For example I'm loading fonts with path "~#/assets/fonts/fa-light-300.woff2" but when I build my project, the resolved path is "vendor/test/fonts/fa-light-300.woff2".
Can you help me how can I configure webpack to resolve path to "/vendor/test/fonts/fa-light-300.woff2"
Here is my vue.config.js configuration
const { defineConfig } = require('#vue/cli-service');
const path = require("path");
module.exports = defineConfig({
transpileDependencies: true,
outputDir: path.resolve(__dirname, 'vendor/test'),
publicPath: '/test',
assetsDir: '../../vendor/test',
filenameHashing: false,
devServer: {
devMiddleware: {
writeToDisk: true
}
},
});
I have a Rust, Web assembly wasm app I need to deploy to an apache server. When upload the build, it doesn't run the software, it just shows a list of the files.
The build files look like this:
build
-0.bootstrap.js
-bootstap.js
-gfdgjkljlkjjiojohio.module.wasm
my webpack config looks like
const path = require('path');
module.exports = {
entry: "./bootstrap.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bootstrap.js",
},
mode: "development",
devServer: {
//host: "0.0.0.0",
port: 8080,
}
};
Where boostrap.js imports the main index.js file
// A dependency graph that contains any wasm must all be imported
// asynchronously. This `bootstrap.js` file does the single async import, so
// that no one else needs to worry about it again.
import("./index.js")
.catch(e => console.error("Error importing `index.js`:", e));
But when I deploy to my apache server, to my domain, I don't get the software running.
Why isn't it running?
I had to use HtmlWebpackPlugin and change my webpack config to this
module.exports = {
entry: './bootstrap.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
inject: true,
template: path.resolve(__dirname, 'index.html'),
}),
]
}
The source code: github.com/alexpilugin/ap-nuxt-firebase-ssr
The issue is next: this Nuxt SSR Application uses the same nuxt.config.js file which is located in /src folder and before deployment it will be copied into the server folder.
nuxt.config.js contains a next build module which creates an issue on server (in the ssrapp firebase function)
buildModules: [
// https://go.nuxtjs.dev/eslint
'#nuxtjs/eslint-module'
],
My question is how to use a single nuxt.config.js file but don't use #nuxtjs/eslint on production?
I found that it's possible to define dev mode in nuxt.config.js file like that:
dev: process.env.NODE_ENV !== 'production'
but how to use it with buildModules in order to use it with a condition?
My current solution - remove #nuxtjs/eslint-module from nuxt.config.js file
I think you can write a javascript function that returns related environment based modules (dev or prod).
// moduleBuilder.js
const getModulesByEnvironment = () => {
const env = process.env.NODE_ENV;
if (env === 'production') {
return [
...
'brilliant_prod_module',
...
];
}
else {
return [
...
'brilliant_dev_module',
...
]
}
};
export { getModulesByEnvironment };
// nuxt.config.js
import { getModulesByEnvironment } from './moduleBuilder';
...
buildModules: getModulesByEnvironment()
...
You could use array and object destructuring together with process.env.NODE_ENV comparison like this:
nuxt.config.js:
const isProduction = process.env.NODE_ENV === 'production'
export default defineNuxtConfig({
modules: [
...(isProduction ? ['nuxt-bugsnag'] : []),
'#nuxtjs/tailwindcss',
'#vueuse/nuxt',
],
...(
isProduction
? {
bugsnag: {
config: {
apiKey: '',
enabledReleaseStages: ['staging', 'production'],
}
}
}
: {}
),
})
I'm using vue-cli 2.9.6, and created a vue project using vue init webpack <project name>.
When I call vue run build, it is creating a number of different js files (and names change each time...):
vendor.20d54e752692d648b42a.js
vendor.20d54e752692d648b42a.js.map
app.ed70f310595763347909.js
app.ed70f310595763347909.js.map
manifest.2ae2e69a05c33dfc65f8.js
manifest.2ae2e69a05c33dfc65f8.js.map
And also css files like this:
app.a670fcd1e9a699133143a2b144475068.css
app.a670fcd1e9a699133143a2b144475068.css.map
I would like the output to simply be 2 files:
build.js { for all js }
styles.css { for all css }
How can I achieve this?
for preventing creation of vendor.js and manifest.js just remove following code from webpack.prod.conf.js
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks (module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
To prevent sourceMaps set in config/index.js the variable productionSourceMap from true to false
Changing name of app.js to build.js can be obtained modifying the entry and outputproperties in webpack.base.conf.js this way:
entry: {
build: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
Update name of the css output file updating options of ExtractTextPluginin webpack.prod.conf.js to filename: utils.assetsPath('css/styles.css'),
// vue.config.js
module.exports = {
chainWebpack: config => {
if(config.plugins.has('extract-css')) {
const extractCSSPlugin = config.plugin('extract-css')
extractCSSPlugin && extractCSSPlugin.tap(() => [{
filename: 'styles.css',
chunkFilename: 'styles.css'
}])
}
},
configureWebpack: {
output: {
filename: 'build.js',
chunkFilename: 'build.js'
}
}
}
or
module.exports = {
configureWebpack: {
optimization: {
splitChunks: false
}
},
filenameHashing: false
}
I'm converting my ongoing Vue.js app over to use vue-cli/Webpack and imported modules Something I'm finding rather tedious at the moment is specifying the relative paths for imports accurately. E.g. import bus from '../../bus', import Cell from '../Cell'. Easy to make a mistake.
I'm assuming it must be straightforward enough to specify a base or root directory and specify absolute paths from that, but I can't see where one would do that. For example, in the standard vue-cli webpack setup, the code I'm working on is all in the 'src' directory, inside which I have 'components', 'mixins', etc. It would be handy if I could use import xxx from 'components/xxx', import yyy from 'components/a/yyy'. How would I do that?
With vue-cli, you put webpack settings in vue-config.js, in the same folder as package.json.
vue-config.js:
var path = require('path')
module.exports = {
configureWebpack: {
resolve: {
alias: {
src: path.resolve(__dirname, 'src')
}
},
}
}
This will allow you to do
import HelloWorld from 'src/components/HelloWorld.vue'
instead of
import HelloWorld from '../components/HelloWorld.vue'
See https://cli.vuejs.org/config/#vue-config-js for more info.
The solution is already in place, in fact, just not well-documented. In webpack.base.conf.js, there is this:
resolve: {
extensions: ['', '.js', '.vue', '.json'],
fallback: [path.join(__dirname, '../node_modules')],
alias: {
'vue$': 'vue/dist/vue.common.js',
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components')
}
}
I've added my own alias, 'mixins': path.resolve(__dirname, '../src/mixins'). So I can now use e.g. import Field from 'mixins/Field', along with e.g. import ScrollableTable from 'components/ScrollableTable'.
I am using laravel and the laravel-mix package.
To make it work add this to your webpack.mix.js :
const path = require('path');
mix.webpackConfig({
resolve: {
alias: {
'#': path.resolve(__dirname, 'resources/js')
},
},
});
You can use something like this:
import { routes } from '#/router/routes'
where /router folder is on the root of my project and I can import my routes anywhere :)
Note: I'm using VueJS 2.0
Create a vue.config.js file at the project root that will contain
var path = require('path');
module.exports = {
configureWebpack : {
resolve: {
modules : [
path.resolve("./src"),
path.resolve("./node_modules")
]
},
}
}
Just use # symbol as root in the path for the import.
For example, let's say you have a firebase folder under root and a firebaseConfig.js
file like this
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "...somekey...",
authDomain: "...someApp....firebaseapp.com",
databaseURL: "https://...someApp....firebaseio.com",
projectId: "...someProjId...",
storageBucket: "",
...bla bla bla...
};
export default firebaseConfig;
in the firebase folder.
You can import the config file anywhere using the following instruction:
import firebaseConfig from '#/firebase/firebaseConfig'
Late answer: To create an alias for all folders inside src. Uses Damian Helme solution. All credits should go to him.
Allows you to import:
import HelloWorld from 'components/HelloWorld.vue'
From:
import HelloWorld from '../components/HelloWorld.vue'
Create vue.config.js on the root folder of the project. Note: Doesn't automatically update when new folders are created, you will need to manually restart.
const path = require('path');
const fs = require('fs');
//Find all files in src and make alias
const dirs = fs.readdirSync(path.resolve(__dirname, 'src'));
const alias = {
src: path.resolve(__dirname, 'src')
}
dirs.forEach(name => {
const filePath = path.resolve(__dirname, 'src', name);
//Only add folders
if (fs.statSync(filePath).isDirectory()) {
alias[name] = filePath;
}
});
module.exports = {
configureWebpack: {
resolve: {
alias
},
}
}
Create vue.config.js file on the root directory
const path = require('path');
module.exports = defineConfig({
configureWebpack: {
resolve: {
alias: {
src: path.resolve(__dirname, 'src')
}
}
}
})
Once after done with the configuration. We can now able to target the file inside src directory using below import statement.
import About from src/component/About.vue
If you have another main folder inside the src directory. You can achieve by using the below command.
package: path.resolve(__dirname, 'src/package')