I cloned project from github and deployment on VM.
All works fine except watching if any file in project updating.
VagrantFile have string to syn folder
config.vm.synced_folder './', '/app', owner: 'vagrant', group: 'vagrant'
Tried to add vue.config.js with
module.exports = {
configureWebpack: {
devServer: {
watchOptions: {
ignored: ['node_modules'],
aggregateTimeout: 300,
poll: 1500
},
public: '192.168.83.181' // vagrant machine address
}
}
}
Below how project structure and terminal with executed vue-cli-service build --watch --mode development looks
node --version
v8.12.0
vue --version
3.1.3
Tried on Ubuntu 16.04 and 18.04 versions.
I have the same issue, but I think the problem is not relative to vue-cli. Because if you change your js code in vm with vi. Then vue-cli can watch this change and pre-compile.But with change from win 10. nothing to happen, despite of changing code is reflected on share folder
Related
I have a Vue 2 app that uses Webpack, and I am trying to use in it the node module PSD.js, which in itself utilizes CoffeeScript as part of it's dependencies. When I try to compile i get the error:
Module parse failed: Unexpected character '#' (1:0) You may need an appropriate loader to handle this file type,
referring to the the file ./node_modules/coffee-script/lib/coffee-script/register.js that PSD.js installed as part of it's dependencies when I did npm install psd.
Any ideas on how to make this work?
I understand I need to tell the Vue app how to handle .coffee files with a loader, but I have tried installing coffee-loader, coffee, set the vue.config.js to:
module.exports = {
publicPath: "./",
configureWebpack: {
target: "node-webkit",
node: false,
module: {
rules: [
// ...
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader'
}
]
}
]
}
},
lintOnSave: false
};
yet still nothing works, I get the same error. I feel it is because I am not using CoffeeScript directly but rather a node module that I AM using, psd.js, is the one using it. That is why I cannot set lang="coffee" in the script tag attribute of my Vue module (I am using vanilla JS to run everything).
thnx in advance
ADDING MORE INFO:
I use a boilerplate framework to setup my app, and it initialises the vue/webpack app for me indirectly.
To reproduce, and even though this system is for Adobe plugins, you do not need the Adobe host app to see the issue, do:
npm install -g bombino
Then in a folder of your choosing run:
bombino
and fill in these params when asked:
? Name of panel? Hello World
? Use your custom templates or bombino defaults? Bombino
What tooling preset should be used? Vue-CLI
? Which Vue-CLI template should be used? bombino-vue-bare (Absolute minimum)
? Host apps to include: After Effects
? Base CEF Port (between 1024 and 65534) 8666
? Run npm install for you? Yes
then cd into Hello-World and run npm run serve. You should see the app is compiled correctly and is running on some port (8080 or higher if taken).
Now go back to the root folder and install psd.js: npm install psd
then go back into Hello-World and run npm run serve again. This time it will fail to compile with the error I started this question with. Even if you go and install coffee-loader by doing npm install --save coffeescript coffee-loader and change the vue.config.js to be like so:
publicPath: "./",
// Thanks Eric Robinson
configureWebpack: {
target: "node-webkit", // Set the target to node-webkit (https://webpack.js.org/configuration/target/)
node: false, // Don't set certain Node globals/modules to empty objects (https://webpack.js.org/configuration/node/),
module: {
rules: [
// ...
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader'
}
]
}
]
}
},
lintOnSave: false
};
or if you do vue use coffee - all of these result in the same error: the compiler/packager doesn't know how to handle the .coffee file (used as a dependency by psd.js).
Thnx again to anyone who has info
I would like to develop an NPM module that the user can import in his project.
The module contain a full administration panel created with Nuxt.
I don't want the user know anything about Nuxt, he just need to run a command like:
myppcommand start
and the application starts a server that is running the administration panel.
So my idea is to develop the NPM module with Nuxt. Generate all the static file inside ./dist folder and then myappcommand start will serve the app from node_modules.
// NPM Package myapp
// nuxt.config.js
export default {
components: [
{
path: '~/components/',
extensions: ['vue']
}
],
buildDir: './.nuxt',
srcDir: './src/',
target: 'static',
ssr: false,
generate: {
dir: './dist/'
}
};
// NPM Package myapp
npx nuxt generate
The command will generate all files in ./dist folder.
// User repo
npm install myapp
This will install myapp inside ./node_modules.
// User repo
cd node_modules/myapp/ && npx nuxt start -c nuxt.config.js
This will start the server and serve the app.
But is this the best way possible? It seems a bit hacky to me, to go inside node_modules, does somebody know a better way?
You could achieve this by declaring that your package has an executable file which starts Nuxt, in the bin property of package.json.
Firstly, create an executable script to start the app:
bin/start.js
#!/usr/bin/env node
// Based on node_modules/.bin/nuxt
global.__NUXT_PATHS__ = (global.__NUXT_PATHS__ || []).concat(__dirname)
require('#nuxt/cli').run(['start'])
.catch((error) => {
require('consola').fatal(error)
process.exit(2)
})
You can verify that this starts the app by running ./bin/start.js (provided you have made the file executable), or node ./bin/start.js.
Then, declare that your package should install this as a script when installed as a dependency:
package.json
{
"bin": {
"myapp": "bin/start.js"
}
}
When your package has been installed with npm install myapp, then node_modules/.bin/myapp will link to node_modules/myapp/bin/start.js and the user will be able to run it with npx myapp.
i have added devServer proxy target as
devServer: {
proxy: {
'^/': {
target: 'https://xmlpi-ea.dhl.com/',
ws: true,
changeOrigin: true
}
}
}
but it is not working when i make build with npm run build, is there a workaround for it?
This is for PRODUCTION not for development.
npm run build
If you are using vue-cli, you can spin you development server with
npm run serve
How to change Vue js application context name?
I added a public path in Vue config js file, but it is not hitting URL with public pathname.
I could see compilation happened with the public path name:
INFO Starting development server... 98% after emitting CopyPlugin
DONE Compiled successfully in 4793ms
5:38:57 PM
App running at:
- Local: http://localhost:8080/testapp/
- Network: http://192.168.104.88:8080/testapp/
Note that the development build is not optimized. To create a
production build, run yarn build.
In vue.config.js
module.exports =
{
publicPath: '/testapp/',
devServer: {
disableHostCheck: true
}
}
there.
I´m starting on VueJS, creating a project in codeanywhere:
npm install -g vue-cli
vue init webpack myProject
So, when i run npm run devi get a
Your application is running here: http://localhost:8080
Because, i am developing on a cloud based IDE, i´cant access http://localhost...
So, i access the way Codeanywhere publish when you create a project:
https://myProject-XXXXXXXX.codeanyapp.com/
But i get a
This Container is currently unaccessible.
Really appreciated any help.
I created a vue.config.js file at the root (next to package.json) with content:
module.exports = {
devServer: {
host: '0.0.0.0',
allowedHosts: [
'.codeanyapp.com'
]
}
};
From the Codeanywhere documentation:
You have to change the default IP so your Container could run externally.
Please change IP address on your container from 127.0.0.1 to 0.0.0.0.
Work for me with nuxt.config.js :
server: {
port: 3000,
host: '0.0.0.0',
timing: false
},