vue config devServer proxy is not working in development mode - vue.js

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

Related

Nuxt taking more than 1 hours to Build

I'm building a Nuxt application. I've done some research but found no definitive solution.
Step 6/8 : EXPOSE 8080
---> Running in e5d36d6e86fe
Removing intermediate container e5d36d6e86fe
---> f655ef5cccc2
Step 7/8 : RUN npm run build
---> Running in f6445150af4c
> nuxt build
ℹ Production build
ℹ Bundling for server and client side
ℹ Target: server
ℹ Using components loader to optimize imports
ℹ Discovered Components: .nuxt/components/readme.md
✔ Builder initialized
✔ Nuxt files generated
ℹ Warming up worker pools
✔ Worker pools ready
ℹ Compiling Client
✔ Client: Compiled successfully in 1.00h
ℹ Compiling Server
✔ Server: Compiled successfully in 1.81m
Update Config
There are several experimental ways of improving build speed.
https://nuxtjs.org/api/configuration-build#parallel
https://nuxtjs.org/api/configuration-build#cache
https://nuxtjs.org/api/configuration-build#hardsource
build: {
// standalone: true,
analyze: false,
parallel: true,
cache: true,
hardSource: false,
splitChunks: {
layouts: false,
pages: false,
components: false,
},
html: {
minify: {
minifyCSS: false,
minifyJS: false
}
},
loaders: {
vue: {
prettify: false
}
},
transpile: ["#coreui/vue", "#coreui/utils", "#ag-grid-community/vue"],
extend(config, ctx) {
if (ctx.isDev) {
config.devtool = ctx.isClient ? "source-map" : "inline-source-map";
}
}
}
Dockerfile
FROM node:14
COPY package*.json ./tmp/
RUN cd /tmp && npm install
RUN mkdir -p /usr/src/app && cp -a /tmp/node_modules /usr/src/app
WORKDIR /usr/src/app
COPY . .
#COPY package*.json ./
#RUN npm install
EXPOSE 8080
RUN npm run build
# RUN npm run generate
CMD [ "npm", "run", "start" ]

Vue CLI 3 remove console.log and code comments with Terser

I'm using VUE CLI 3 and I need to remove the console.log and code comments from the production built. This is my Terser setup:
webpack.config.js in src folder
module.exports = {
mode: 'production',
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {drop_debugger},
mangle: true, // Note `mangle.properties` is `false` by default.
module: false,
output: null,
toplevel: false,
nameCache: null,
ie8: false,
keep_classnames: undefined,
keep_fnames: false,
safari10: false,
},
}),
],
},
};
My production workflow: Run npm run build -> cd dist -> npm run serve
The production build still outputs all console.log statements and shows code comments (<!-- -->).
What do I need to change to remove them?
First of all: make sure you are configuring Terser correctly:
terserOptions: {
ecma: 6,
compress: { drop_console: true },
output: { comments: false, beautify: false }
}
npm run serve
is usually a shortcut for:
vue-cli-service
vue-cli-service --help
Usage: vue-cli-service <command> [options]
Commands:
serve start development server
build build for production
inspect inspect internal webpack config
lint lint and fix source files
So when your workflow is the above mentioned npm run build -> cd dist -> npm run serve then you are actually starting the dev server, which does not apply Terser.
In order to run the production build you can use any webserver capable of serving static content:
NodeJs examples:
npm install -g serve
serve -s dist
or
npm install -g node-static
static dist

Vue CLI 3.5.5 standard install showing webpack websocket errors

I recently upgraded my VUE CLI to 3.5.5
After running the standard install, I noticed CORS and websocket errors being thrown in the browser ...Connection closed before receiving a handshake response. The errors are thrown in both Firefox and Chrome.
I am guessing this has something to do with the webpack devserver and CORS but its a guess because I know nearly nothing about webpack.
I added a vue.config.js and tried various configs for the webpack devServer but none have worked.
Can anyone illuminate this issue? - it must be very common. Thanks
So the solution i found was to create a vue.config.js file at the root level of the project and use this webpack config:
module.exports = {
devServer: {
host: "0.0.0.0",
public: "0.0.0.0:8080",
disableHostCheck: true,
proxy: {
"/app": {
target: "http://localhost:8081",
changeOrigin: true,
ws: true
}
}
}
};

How to access VueJS on codeanywhere

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
},

Win10, VirtualBox,Ubuntu, Vue-cli 3 - watching not working

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