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.
Related
My project currently uses Vite, Vue3 and TS
I have next project structure
Link
I want to build and place each index.html file, its style, script and assets to one folder for each input entry
Currently, when I run build with this vite.config
build: {
rollupOptions: {
input: {
order: fileURLToPath(
new URL("./src/views/Order/index.html", import.meta.url)
),
catalog: fileURLToPath(
new URL("./src/views/Catalog/index.html", import.meta.url)
),
shops: fileURLToPath(
new URL("./src/views/Shops/index.html", import.meta.url)
),
},
output: {
dir: "dist-chunk",
},
},
},
it places files in dist like this
Link
As you can see, I have separate folders for each entry and index.html inside. But all other related files are placed in assets directory
But I want something like this, when each script and style placed in the same folder with index.html
Link
Does Vite allows such building strategy and how I can configure Vite.config.ts for what I want?
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 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.
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/",
},
]),
]
My goal is to provide a css file in the distribution package which can be used by the consumer if needed.
For that I would like to create a kind of global scss file, but I want to avoid that this style is attached to each component + it also won't be used directly by the components. So for that I would like to create my-style.scss file somewhere in the /src folder.
What would be the best way to compile this file to my-style.css and copy it to the dist folder?
It is possible to specify a global style with Stencil. Simply add the globalStyle property to your stencil.config.js and provide the entry scss file. Your config should look something like this:
const sass = require('#stencil/sass');
exports.config = {
namespace: 'my-component-lib',
outputTargets:[
{
type: 'dist'
},
{
type: 'www',
serviceWorker: false
}
],
globalStyle: 'src/globals/app.scss',
plugins: [
sass()
]
};
exports.devServer = {
root: 'www',
watchGlob: '**/**'
}
The build will successfully compile the scss to dist/my-component-lib.css.
From the docs: https://stenciljs.com/docs/config/#copy
The copy config is an array of objects that defines any files or
folders that should be copied over to the build directory. Each object
in the array must include a src property which can be either an
absolute path, a relative path or a glob pattern. The config can also
provide an optional dest property which can be either an absolute
path or a path relative to the build directory. Also note that any
files within src/assets are automatically copied to www/assets for
convenience.
In the copy config below, it will copy the entire directory from
src/docs-content over to www/docs-content.
Within stencil.config.ts:
copy: [
{ src: 'docs-content' }
]
For example I am copying my css file from src to the build directory and it's totally standalone, e.g. https://github.com/BlazeUI/blaze/blob/master/packages/atoms/stencil.config.ts#L14