Is it possible to build single component libraries from a nuxt project like you do with vue-cli-service build --mode production --target lib ... in vue?
I installed vue-cli-service as dev-dependency (into my nuxt project) and ran:
vue-cli-service build --mode production --target lib --name <lib-name> </path/to/Component>
If I run it without any additional configuration, the build failed with:
Error: Compiling RuleSet failed: Unexpected property test in condition (at ruleSet[1].rules[1].resource.test: resource => {
currentResource = resource
return true
Related
Immediately after creating the application (without making any changes), I start building the library, according to the official documentation: https://cli.vuejs.org/guide/build-targets.html#app
npm run build --target lib --name myLib 'src/components/HelloWorld.vue'
As a result, I get the following error: Entry module not found: Error: Can't resolve 'C:\domains\vue-hello-world\lib' in 'C:\domains\vue-hello-world'
I also tried to build the library with this command:
vue-cli-service build --target lib --name myLib 'src/components/HelloWorld.vue'
And got another error:
I have a vue.js app, and it is using two files named dev.env.js and prod.env.js to read environment variables and configure the app.
the dev.env.js is currently configured with data that our frontend developers are using.
I need to make some adjustments on my own and need another env file.
I have created a file named ninja.env.js next to the other files in config/ which contains:
'use strict'
module.exports = {
NODE_ENV: '"development"',
SERVER_PATH: '"localhost:8560"',
SOCKET_PATH: '"localhost:8561/map"'
}
but there is no way to run this.
I have tried:
$ npm run ninja
>>> npm ERR! missing script: ninja
$ npm run dev --mode ninja
>>> Failed to compile with 1 errors 11:12:02 AM
This dependency was not found:
* ninja in multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ninja
To install it, you can run: npm install --save ninja
so, is there a way to add multiple environment files?
Yes, as mentioned in docs, basically you can add different modes like this:
.env.[MODE_NAME]
And they you can run it like:
vue-cli-service build --mode [MODE_NAME]
I want to add a folder with some JSON files within the dist folder when building my own library using vue-cli.
I run the following command to build the library:
vue-cli-service build --target lib src/index.js.
I have tried to add the folder within the public folder, but it doesn't work when building library.
Is there a way to achieve it?
Thanks
You can use cp command
vue-cli-service build --target lib src/index.js && cp -R public/* dist
I've used Vue for some time now, but I'm just getting started with the CLI and I got a bit confused.
I installed #vue/cli and if I type vue in the command line, I get:
Usage: vue <command> [options]
Options:
-V, --version output the version number
-h, --help output usage information
Commands:
create [options] <app-name> create a new project powered by vue-cli-service
add [options] <plugin> [pluginOptions] install a plugin and invoke its generator in an already created project
invoke [options] <plugin> [pluginOptions] invoke the generator of a plugin in an already created project
inspect [options] [paths...] inspect the webpack config in a project with vue-cli-service
serve [options] [entry] serve a .js or .vue file in development mode with zero config
build [options] [entry] build a .js or .vue file in production mode with zero config
ui [options] start and open the vue-cli ui
init [options] <template> <app-name> generate a project from a remote template (legacy API, requires #vue/cli-init)
config [options] [value] inspect and modify the config
upgrade [semverLevel] upgrade vue cli service / plugins (default semverLevel: minor)
info print debugging information about your environment
Run vue <command> --help for detailed usage of given command.
I created a project with vue and I needed to install #vue/cli-service-global for some reason that I can't remember.
After that, however, I noticed:
'vue-cli-service' is not recognized as an internal or external command
And that's because I had to install #vue/cli-service. Now, when I type vue-cli-service in the command line, I get:
Usage: vue-cli-service <command> [options]
Commands:
serve start development server
build build for production
inspect inspect internal webpack config
run vue-cli-service help [command] for usage of a specific command.
Apparently, I can build, serve, and inspect with both CLI tools. My question is - what's the difference between them? Both the readme of #vue/cli and #vue/cli-service have nothing but a link to this page where no answer is given to that question.
What can I do with one that I can't do with the other? Do I need both?
#vue/cli-service-global is a package that allows you to run vue serve and vue build without any local dependencies.
#vue/cli-service is a package that actually doing those vue serve and vue build, both #vue/cli-service-global and #vue/cli depend on it.
If you're using #vue/cli then you don't need to install another two independently, since it already has #vue/cli-service in its dependencies.
Added: Just to be sure, I'll explain it more:
#vue/cli:
add, create, config, ui and other commands
build and serve commands through #vue/cli-service-global package
inspect command through #vue/cli-service package (local dependency)
#vue/cli-service-global:
build, inspect and serve commands through #vue/cli-service package
#vue/cli-service:
build, inspect and serve commands
So, you need to install #vue/cli only and remove other two.
Added: Clarification about using vue-cli-service:
When you create a project using vue create command, #vue/cli makes a link to vue-cli-service binary inside ./node_modules/.bin of created project.
Then you can use it like this:
Access it directly as vue-cli-service inside npm scripts (package.json):
"scripts": {
"watch": "vue-cli-service build --watch"
}
Access it from the shell: ./node_modules/.bin/vue-cli-service build --watch.
You can even add ./node_modules/.bin to you shell PATH and access it from the shell directly as vue-cli-service.
I have a vue-cli 3 based project. Here is the include section of my tsconfig.json
{
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue"
]
}
The typescript linter also uses the same file. I need yarn lint command to also lint the files in tests directory. When I add the tests directory to above include section, then vue-cli-service lint works as expected but vue-cli-service build starts to complain about unknown global functions (describe(), test() etc).
I created a separate tsconfig.lint.json that includes both src and tests directories and changed the yarn lint to actually do a tslint -p tsconfig.lint.json (instead of vue-cli-service lint). Now both yarn lint and yarn build work. But yarn lint fails when it is invoked from lint-staged script.
Is there an easy way to achieve this? All I need is:
yarn lint should lint both src and tests directories.
When doing a git commit the yarn lint should lint staged files in both the directories.