Is there a way to configure vuepress to look for the folder .vuepress somewhere else than default /docs?
UPDATE: VuePress 1.5.0 now only reads from docs/.vuepress, so the workaround below no longer works. However, another possible (less elegant) workaround is to symlink the docs/.vuepress to the desired location (tested on macOS Catalina).
For example, you could symlink it to <projectRoot>/.vuepress on macOS with:
mkdir .vuepress docs
cd docs
ln -s ../.vuepress
As of VuePress 0.12.0, there's no specific configuration to set the location of .vuepress/. VuePress always looks for .vuepress/ in the target directory (docs/) and the immediate parent directory. If not found, VuePress creates .vuepress/ in the parent directory of docs/.
If your objective is to prevent the creation of docs/.vuepress/ and you didn't mind .vuepress/ in the parent directory of docs/:
Create .vuepress/config.js in the parent directory of docs/.
Edit that file to contain the following config:
module.exports = {
dest: 'foo' // desired path to VuePress output
}
Run vuepress build in the parent directory of docs/.
The result of the above config is to create a directory foo/ with the VuePress static site output:
$ vuepress build
WAIT Extracting site metadata...
[2:20:45 AM] Compiling Client
[2:20:45 AM] Compiling Server
(node:47073) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
[2:20:48 AM] Compiled Server in 3s
[2:20:50 AM] Compiled Client in 5s
WAIT Rendering static HTML...
DONE Success! Generated static files in foo.
Don't think there is. In 2018, the author has stated:
I don't see practical value in this except for personal preference, so probably not.
Related
I'm having trouble configuring vite.config.js so that I can have both my Vue app and a service worker file live in the dist folder. My service worker was working with webpack previously but I've just upgraded to Vite and I'm having trouble configuring the build. My goal is to have my dist folder look like:
dist
|- index.html
|- sw.js
|- assets
|- app.[hash].js
I tried various different configurations but none of them have worked:
An approach that is recommended by Workbox. It seems like this doesn't work because of what is mentioned in this comment.
After reading that comment I tried to separate the logic out into a separate file (vite-sw.config.js) and running vite build -c vite-sw.config.js. This successfully generated the file I wanted but I couldn't figure out how to get that file mixed in with the original build. Is there a way to combine vite build and vite build -c vite-sw.config.js so that they both output to the same dist directory without overriding each other?
I found this alternative approach which successfully created the folder structure I wanted in dist but I was unable to adjust the format of the service worker file so I got Cannot use import statement outside a module (at sw.js:1:1) in the browser. Is there some way to use this method and somehow configure the format of the service worker file?
Any other ideas? I've been pretty stuck on this for a while. Thanks!
Try changing your configuration like this:
export default defineConfig({
build: {
rollupOptions: {
output:
{
format: 'es',
strict: false,
entryFileNames: "[name].js",
dir: 'dist/'
}
}
},
.
.
.
});
When I build my Vue project with npm run build, I would like to choose particular Vue files to be (re)compiled into the dist folder. My idea was by changing the configurations in webpack or the webpack-chain to compile from a specific entry point. An example of my goal would be:
Let's assume I have 2 components; A.vue and B.vue (and ofcourse the default files like index.html etc.)
Then I build the project, which gives me a ./dist folder with everything compiled. Then after I make changes to B.vue (and change the config file most likely), I only want B.vue to be recompiled into the ./dist folder. I already use dynamic imports so that A.vue and B.vue are different bundles, so that other files should not have to be changed.
Can I select a specific file to be compiled only?
(I am aware that the dist folder gets emptied after building, but that I will try to fix later if this could be possible)
I think you're looking for watch mode: npm run build --watch
Not able to load js files from local where as CDN path working fine in Dojo 2 application. Once included custom JavaScript files using script tag in index.html. But in browser it shows the error 404 file not found.
Please suggest as i need these for my Dojo 2 application.
This is my how i am using script tag to include
script src="assets/js/jquery.js" type="text/javascript"
Currently, the Dojo 2 build does not copy external assets to the build directory, but we are working on a way of specifying such assets in the .dojorc config (index.html is not/will not be scanned for assets). In the meantime, another means of delivering static assets will be required (for example, configuring the assets/ path at the server level).
Assuming you are using the dojo 2 cli you need to move your assets folder into the root of you application, this is in the dojo 2 build docs:
While most assets will be imported by modules in the src/ directory and therefore handled by the main build pipeline, it is often necessary to serve static assets or include assets in the HTML file itself (e.g., the favicon).
Static assets can be added to an assets/ directory at the project root. At build time, these assets are copied as-is without file hashing to output/{mode}/assets, and can be accessed using the absolute /assets/ path. For example, if users need access to a static terms of service document named terms.pdf, that file would added to assets/terms.pdf and accessed via the URL /assets/terms.pdf.
The build also parses src/index.html for CSS, JavaScript, and image assets, hashing them and including them in the output/{mode}/ directory. For example, it is common for applications to display a favicon in the URL bar. If the favicon is named favicon.ico, it can be added to the src/ directory and included in src/index.html with . The build will then hash the file and copy it to output/{mode}/favicon.[hash].ico.
But another option is to add a new npm command "move-assets": "cp -R ./src/assets ./output/dist/assets" to you package config
"scripts": {
"start": "dojo build --mode dev --watch memory --serve",
"build": "dojo build --mode dist && npm run move-assets && npm run move-assets",
"move-assets": "cp -R ./src/assets ./output/dist/assets"
}
This will move your assets into the build output folder ./output/dist
I'm using the latest vue-cli version 3.0.
My current issue is that whenever I run npm run build the files generated in the dist folder can't be run without a server.
I would like to be able to just open the index.html file on the browser. How do I go about doing this?
I ran into a similar issue and the following two changes helped me to make it work. Now I can just open index.html in Chrome as a file to run my SPA from file system.
In vue.config.js, I did not have a publicPath configured, which resulted in the default "/".
I had to configure it to empty string like this so that it uses relative paths:
module.exports = {
publicPath: '',
}
PS: Since Vue CLI 3.3 use publicPath instead of the now deprecated baseURL
I was using the history mode of vue-router, which does not work
on a local file system to route the paths back to index.html. So I
omitted the mode to go back to the default hash mode.
I was able to fix this issue by manually changing the url of the referenced files.
It's a bit of a pain, but this was a solution without having to mess around with the build configuration.
What you need to do:
Open index.html
Find href=/ and replace with href=
Find src=/ and replace with src=
NOTE: I was in need of this solution because I was creating a Phonegap app.
You can use the http-server module
npm install http-server -g
http-server dist/
normally the server starts at port 8080 so you can serve the build app on http://localhost:8080
I recently installed the file watchers plugin, and I must configure it to use compass to compile my sass files.
My current config is:
Program: compass
Arguments: compile
Working dir:
Env vars:
output:
How can I target the closest path to(upward folder tree) config.rb file within scss`s parents folders?
I need it to put in "Working dir:" field
My paths are
scss:
projects/<gitrepo>/<project>/<module-name>/static/<same-module-name>/scss/common/main.scss
css:
projects/<gitrepo>/<project>/<module-name>/static/<same-module-name>/css/common/main.css
config.rb are in:
projects/<gitrepo>/<project>/<module-name>
Module name and folders under scss may vary.
Thanks
I'm using the following solution:
Create a compass project in your Idea project folder by this command in your idea project folder:
compass create --css-dir <your css dir here> --sass-dir <your SASS dir here>
this will create a config.rb in the root of your idea project (this is important). You can learn more about possible options calling compass create --help.
Set up the following setting for SASS/SCSS file watcher
Scope: project files
Program: compass.bat
Arguments: compile $FilePathRelativeToProjectRoot$
Working directory: $ProjectFileDir$
Environment variables: --empty--
Output paths to refresh: --empty--
Please note that ruby bin folder is in my PATH environment variable.