I'm using the Vue CLI to compile my single page application. I am using Vue Router, Vuex, Axios and Vuetify as imported libraries. I have been using npm run serve during development and that has been fine, however I now want to compile for production.
I have used the command npm run build and the build starts fine with no errors shown, but it seems to never end. I stopped it after half an hour because I thought that was far too long. Can someone point me in the right direction? I assumed it would only take a couple of minutes if that. I'm sure there is some configuration I am missing.
UPDATE
My vue.config.js file contents:
const path = require('path');
module.exports = {
devServer: {
writeToDisk: true,
},
}
When I run npm run build, according to package.json this will run vue-cli-service build
Related
I've got a private npm package hosted on GitHub. The package is essentially a Vue component and I build it with vue-cli-service build --target lib --name init-map src/main.ts. Here's the main.ts's contents:
import InitMap from "./components/InitMap.vue";
export { InitMap };
I use the package inside my other project, and I develop them both simultaneously. Therefore, I want to link the package: yarn link (inside the package directory), then yarn link #smellyshovel/init-map inside the consuming-project directory.
The problem is that when I run "yarn serve" (i.e. vue-cli-service serve) inside the main project, it freezes on 69%...
... and seems to stay like that forever.
Axios doesn't seem to be a problem to me (even though the message), since 1) everything is working fine without the linked package, 2) it shows a different message sometimes (something bootstrap-vue-related on 58%) though I only saw this other message like once (and not sure what exactly caused the difference).
What am I doing wrong? Why does the serve freezes when using a linked package as a dependency? How do I solve this?
Please, name me any other stuff you would like me to show since I'm not sure what exactly could be related to the issue and therefore haven't included any details that might be of interest.
OK, the problem indeed seems to be related to resolving symlinks, and the solution would be to simply prevent webpack from resolving these symlinks: https://github.com/vuejs/vue-cli/issues/1494#issuecomment-498144990
configureWebpack: {
resolve: {
symlinks: false,
},
}
While I clearly am no webpack expert, I usually figure/find out what I need to modify in order to achieve what I need. However, I lost more than a day on this one, even though it seems fairly simple:
I want to add an index.html to the build, after building, by copy-ing it from a folder.
I tried adding this to configureWebpack, in vue.config.js:
plugins: [
new CopyPlugin([{
from: 'deploy',
to: '/',
force: true,
copyUnmodified: true
}])
]
(the only file in deploy folder is this index.html).
I also tried various versions of chainWebpack, mostly picked from github discussions, trying to tap into plugins like html, move-index and copy. However, most of what I found on github breaks the build for me.
Not even simple attempts, where I just try to tap and console don't seem to work:
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
console.log(args);
return args;
});
},
outputs:
Building for production as library (commonjs,umd,umd-min)...[]
ERROR TypeError: Cannot read property '__expression' of undefined`
...
at module.exports.toConfig (D:\sgn\www\_g\berwow\BERWoW\Client\RecommenderV2\node_modules\webpack-chain\src\Config.js:129:40)
What I figured out so far:
CopyPlugin either doesn't work or it has an exception for .html files.
There're are at least two plugins: (move-index & html) which probably interfere with my copy. I haven't figure out how to push my change to the back of the queue.
I also tried with a test.html and I also tried placing a different extension on my file .txt and overriding it when copying it, back into .html. Most times I end up with errors.
Is there a relatively straight forward way to tap into vue-cli-serve's build command and simply copy an index.html to the folder?
The build command I'm using is:
vue-cli-service build --target lib --name SomeName --inline-css --inline-vue src/main.ts
Please note it's a --target lib build, which doesn't output an index.html into the dist folder, but a demo.html. So I'd advise testing any solution against a --target lib build, as it clearly has a different output than normal builds.
Here's the output of vue inspect: https://jsfiddle.net/websiter/rkh5ecvd/embedded/js/dark/#JavaScript
and here's the current contents of my vue.config.js: https://jsfiddle.net/websiter/fou3y4zc/embedded/js/dark/#JavaScript , where configWebpack and chainWebpack are attempts at addressing/peeking into the above issue.
I'm using #vue/cli 4.2.3 and vue 2.6.11 with webpack 4.42.1
I figured out a way around it, by simply running npm i copyfiles -D and adding this bit to the build script:
&& copyfiles -f ./deploy/* dist/Recommender
It's not a proper answer to the problem, it's a way around it. But it works :).
Still interested in how this could be chained to the webpack build script properly.
I know this is an old issue, but I figured I'd add some more details for anyone still having issues with this in Vue 3.
I was able to achieve a similar output with vue 3.0.0, #vue/cli-service 4.5.0, webpack 4.46.0 and copy-webpack-plugin 6.4.1 using the following configs:
vue.config.js
const CopyPlugin = require("copy-webpack-plugin");
/**
* #type {import('#vue/cli-service').ProjectOptions}
*/
module.exports = {
chainWebpack: (config) => {
// Disable HTML Generation.
config.plugins.delete("html");
config.plugins.delete("preload");
config.plugins.delete("prefetch");
// Copy all contents of the "static" src directory
// to the destination's root.
config.plugin("copy").use(CopyPlugin, [
{
patterns: [{ from: "./static", to: "./" }],
},
]);
},
};
npm script:
vue-cli-service build --target lib --inline-vue --name app src/main.js
Note: the "inline-vue" argument forces embedding Vue into the bundle (see https://cli.vuejs.org/guide/build-targets.html#library).
I have a project in nuxt.js. I tried to deploy it on gh-pages doing npm install gh-pages --save-dev. I add some code to packed.json and was ok, a saw my project on gh-pages
https://aniaska4.github.io/business_card/
But suddenlly my project disapeared and I got an errors:
I have .nojekyll file in gh-pages branch, but the errors are still here.
I dont know why. Any hints to help?
EDIT:
For everybody who have the same problem. I used travis-ci to deploy my project once again. This is not only for node.js but for other as well. Now it is ok.
You need to deploy only the content of the dist folder not the folder itself
You need to setup router base
nuxt.config.js
export default {
router: {
base: '/<repository-name>/'
}
}
See docs
I'm new in vue, and a documentation says that every time I create a component I have to run npm run dev and npm run watch.
But don't know what their purpose is?
Can someone help me?
npm run dev combines all your Vue components and other JavaScript files into a browser-friendly combined file.
npm run watch does the same, but then it stays active and "watches" for updates to your .vue and .js files. If it detects a change, it'll re-build the browser-friendly file so you can just refresh the page.
Technically those will just run whatever scripts are defined in your package.json with the name dev and watch. Without seeing your package.json it's impossible to know exactly what they do.
For most project configurations those commands will compile your Vue components into raw javascript. The difference between dev and watch is the dev command will compile the code then exit while the watch command will compile the components then watch the files and recompile when one of them changes.
For development purposes i don't use npm run serve because i'm integrating Vue with my backend project. Instead, i wrote my own command in package.json:
"dev": "vue-cli-service build --mode development --watch"
And it all works great, but it generates tons of webpack's hot-update.js files in my build dist directory and the problem is that they don't get deleted.
Is there a way to configure vue-cli/webpack in such way that these files are automatically deleted or not even created in the first place?
I believe the development mode will automatically enable hot reloading when the watch flag is enabled. Even though without the watch flag the development mode flag on build will not include hot reloading. Confusing. I had to add this to my vue.config.js file:
module.exports = {
chainWebpack(config) {
config.plugins.delete("hmr")
},
};
Note: that will ruin
npm run serve