I have the following vue.config.js (showing just the relevant part)
pwa: {
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: 'src/plugins/service-worker/service-worker.js',
exclude: [/.*images\/(?!cached).*/g, /\.map$/, /manifest\.json$/]
}
},
I'm looking to exclude all ./src/assets/images/* images unless they are in the following directory:
./src/assets/images/cached/*
Here is an example of this regex working: https://regex101.com/r/vANnrn/1/
However webpack/workbox still includes all of my images that might be included in components in the precache-manifest file.
My suspicion is that the exclude option applies to the folder structure of assets inside /dist rather than /src? If that's the case this won't work because webpack puts all images into a flat /dist/img folder.
Related
I have a VUE2 project and in the public folder I created an iframe.html file that will be loaded in an iframe.
That iframe will also load a javascript.js file that I want encoded/uglified upon "npm run build" but I also want to be able to access it during dev.
How could I proceed?
Should this js file be placed inside the /src/assets/ folder and referenced from the iframe.html file? If yes, any advice?
Or should it stay in the public folder and upod the dist folder being built, encode it with something.
Any solution is welcome, thanks in advance!
Edit: Here are further details of how I use the iframe.
First, I'm referencing the .vue file in the router like so:
{
path: "/pages/:id/edit",
name: "edit",
component: () => import("../views/Edit.vue"),
},
Next, in the Edit.vue file, I add the iframe like so (note how it's referencing iframe.html that is in the public directory):
<iframe
id="iframe"
ref="iframe"
src="iframe.html"
/>
Next, in the iframe.html it's just normal html code, with this part including the javascript.js file (that actually is in the public folder as well for now)
<script src="javascript.js"></script>
You can explicitly include the .js file in your Webpack config by adding a rule for UglifyJsPlugin:
npm i -D uglifyjs-webpack-plugin
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
...
module.exports = {
optimization: {
minimizer: [
new UglifyJsPlugin({
include: /\/regex-for-file/,
minimize: true
})
]
}
...
};
In Vue.config.js, this might look like:
configureWebpack: {
plugins : [
new webpack.optimize.UglifyJsPlugin({
uglifyOptions: {
include: /\/regex-for-file/,
minimize: true
}
)}
]
}
Another option is to use uglify-es; this would allow you to get even more explicit by specifying from where to copy the file during build (assuming you might want the file located outside of src/):
npm i -D uglify-es // CopyWebpackPlugin ships w/ Vue's Webpack conf by default
const UglifyJS = require('uglify-es');
const { resolve } = require('path');
const resolveAbs = (dir) => resolve(__dirname, dir);
new CopyWebpackPlugin([
{
from: resolveAbs('../external'),
to: config.build.assetsSubDirectory
},
{
from: resolveAbs('../src/custom-build-path'),
to: config.build.assetsServerDirectory,
transform: (content, path) => UglifyJS.minify(content.toString()).code;
}
]),
To be able to access it during dev, you can include the path of the js file (relative to your Vue src directory) using the resolve.alias option in the config (so you don't need to deal with possibly ridiculous relative paths in your project). Finally, you can look into webpack's HTML plugin docs for info on importing an external index.html file if needed
I would recommend not putting it in static; by default it will not be minified and built if placed in that directory.
Update/edit: Sorry, I saw a 'uglify' and just assumed you wanted uglify js. As long as the script is in your Vue project directory (or otherwise specified in the Webpack config) the file should be minified during build. Vue has pretty smart defaults for Webpack; assuming the iframe is being referenced somewhere in the app i.e. the dependency graph it will be built.
I am trying to find a way to change the file location at compilation.
In my project, some assets files are defined in public/aclib/. However I would like to get them in /public only in the compiled version as that's what the code uses.
Of course, I could just put those files directly in public/ in the project, but I'd like them to be in a subfolder for the project clarity.
Is this possible at all?
Thanks a lot for your help.
Search for copy-webpack-plugin
For example, in vue.config.js add property:
configureWebpack: {
new CopyPlugin({
patterns: [
{ from: "public/aclib", to: "public" }
],
}),
}
I'm quite new in the Vue / electron...
I need to list all folder names that are in the /public directory.
Inside of these folders may be other subfolders with .pdf files.
So far i try it with:
require.context('#/../public/pdf/moreFolders', true, /^.*\.*$/)
but this seems more for displaying files inside a folder.
In the end, I want to show a menu that has the tree structure of that public folder.
Any idea of how I can display such a structure in Vue?
You can list files and read the content simply by using nodejs modules:
const fs = require('fs')
...
If the build should contain those files you have to add an entry in the vue.config.js
module.exports = {
transpileDependencies: [
'vuetify'
],
pluginOptions: {
electronBuilder: {
builderOptions: {
...
extraFiles: [
{
from: './data',
to: 'data',
filter: [
'**/*'
]
But that is only needed, if you want to use another directory, I would suggest. Public is always copied, as I know.
I'm trying to integrate a vue project that I built with the vue cli into an existing .net app. I'm very new to vue, so I'm trying to follow guides and such, but am left with lots of questions.
While trying to compile this, I found that the vue cli-service node module has the following for setting the main.js file located in it's base.js file.
webpackConfig
.mode('development')
.context(api.service.context)
.entry('app')
.add('./src/main.js')
.end()
.output
.path(api.resolve(options.outputDir))
.filename(isLegacyBundle ? '[name]-legacy.js' : '[name].js')
.publicPath(options.publicPath)
I need to override this since my .net app doesn't have a src directory and the usage of this vue app won't follow that path structure. I'm not seeing a way to do it in my vue.config.js file. I would expect that if I can override it, that would be the spot.
I could overwrite the base.js file where this exists, but when a co-worker runs npm install, they would get the default value rather than what I have. The only option I see there is checking in all the node modules to git which we really don't want to do.
For anyone in a similar situation, I found what worked for me. It's not the ideal solution due to the fact that it forces you to build into a js folder. That resulted in the file being put in Scripts\build\vue\js. Would be nice to be able to just dump it in the vue folder, but at least this works. Code below.
vue.config.js
module.exports = {
publicPath : "/",
outputDir: "Scripts/build/vue", //where to put the files
// Modify Webpack config
// https://cli.vuejs.org/config/#chainwebpack
chainWebpack: config => {
// Not naming bundle 'app'
config.entryPoints.delete('app'); //removes what base.js added
},
// Overriding webpack config
configureWebpack: {
// Naming bundle 'bundleName'
entry: {
quote: './Scripts/Quote/index.js' //where to get the main vue app js file
},
optimization: {
splitChunks: false
}
},
filenameHashing: false,
pages: {
quoteApp: { //by using pages, it allowed me to name the output file quoteApp.js
entry: './Scripts/Quote/index.js',
filename: 'index.html'
}
}
}
I'm using Vuejs in a new project and I've added some images to the assets folder. I need an image to be referenceable also in public/index.html, but when I build the project the resulting filename includes an hash.
For instance I've src/assets/logo.svg and after build I've dist/img/logo.e80b121e.svg, but I want dist/img/logo.svg
Is there a way to remove the hash only for a specific file? I need the hash in the other assets. I'm configuring webpack with vue.config.js.
If you're using the webpack config vue cli generated four you if you move your asset in the static folder it will not get the hash.
Items from assets are getting hashed.
You need to get out the assets files from the entry, assuming that you has chunckhash configured (something like this: output: {filename: "[name].[chunkhash].js"}).
You could copy directly from source and add the assets to index.html using some of this webpack plugins:
CopyWebpackPlugin
HtmlWebpackExternalsPlugin
example:
plugins: [
new HtmlWebpackExternalsPlugin({
externals: [
{
module: "#fortawesome/fontawesome-pro",
entry: "css/all.css",
},
],
}),
new CopyWebpackPlugin([
{
from: "./node_modules/#fortawesome/fontawesome-pro/webfonts",
to: "./vendor/#fortawesome/fontawesome-pro/webfonts/",
},
]),
]