I am attempting to enable https from my vue.config.js file
Vue.js version: 2.6.14
#vue-cli version: 4.5.13
Current vue.config.js
module.export = {
devServer: {
/*
Attempting to use certficate to utilize https, but neither approach works
https: {
key: fs.readFileSync(path.join(__dirname, '../certs/[key].pem')),
cert: fs.readFileSync(path.join(__dirname, '../certs/[cert].pem'))
}*/
https: true,
public: 'https://localhost:8080/'
},
}
I have even tried changing the port in the config file, but have had no luck. Part of me is thinking that the config file is not being read in properly, but I cannot understand why.
To start the dev server I currently use npm run serve
Current project directory structure
/project
- /certs
- /frontend
-- /node_modules
-- /public
-- /src
-- /tests
-- babel.config.js
-- jest.config.js
-- package.json
-- package-lock.json
-- vue.config.js
package.json Scripts Section
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
}
Any pointers to what is going wrong is greatly appreciated.
Related
How can I load for production and development different settings.
I want something like this for example:
nuxt.config.js
sentry: {
dsn: 'xxx',
config: {
disabled: !env.isDev
}
},
Unfortunately isDev is not usable at that stage.
Create 2 different config files:
nuxt.config.dev.js
nuxt.config.js
and in package.json in scripts section specify config file for dev version
with --config-file nuxt.config.dev.js:
"scripts": {
"dev": "cross-env NODE_ENV=development HOST=111.111.111.111 PORT=3001 nodemon --watch api --exec \"nuxt --config-file nuxt.config.dev.js --spa\"",
"build": "nuxt build",
"start": "cross-env NODE_ENV=production HOST=111.111.111.111 PORT=3002 nuxt start --spa "
}
Thank you for the good input.
In the meantime a found an other solution which is working fine for my current use case.
nuxt.config.js
import stdEnv from 'std-env'
...
sentry: {
dsn: 'xxx',
config: {
disabled: !stdEnv.dev
}
},
...
I think this is a good and easy solution if you have only little difference to your production setup.
At the end I will probably use a mix of both.
EDIT:
importing 'std-env' in nuxt.config.js gave me some problems on production.
I use this peace of code at the moment without any issues:
(process.env.NODE_ENV === 'development')
That way you don't need to import anything!
I have been working on Vue.js and Node.js to build my app. When I have started with Vue it is by default running on 8080 and Node I am running on 3008.
What I am trying to do is due to some circumstances I want to change the port for Vue from 8080 to any other like 8086 or 3005. How can I do that?
Simply you can run the following command to run vue app as per your required port :
npm run serve --port 8086
Another way is to update the serve script command in your package.json file. Just append --port 8086 like so:
"scripts": {
"serve": "vue-cli-service serve --port 8086",
"build": "vue-cli-service build",
"inspect": "vue-cli-service inspect",
"lint": "vue-cli-service lint"
}
If you don't have one create vue.config.js in the root dir of your project and there add this option:
module.exports = {
devServer: {
port: 8086
}
}
In webpack docs you can see all the available options for configuring the dev server.
Check also vue-cli docs.
This is the way! ...that worked for me!
npm run serve -- --port 8086
With "npm":
npm run serve --port 8086
With "yarn":
yarn serve --port 8086
If you are using vite as your build tool, you can override the default port with the one you want by providing a server.port entry in the vite configuration file - vite.config.js
In the example below, I set the default port to 8086
export default defineConfig({
...
server: {
port: 8086,
},
});
in vue.config.js
module.exports = defineConfig({
...
devServer: {
port: 8086,
},
DIR: node_modules#vue\cli-service\lib\commands
CHANGE FILE: serve.js
const defaults = {
host: '0.0.0.0',
port: 8086,
https: false
}
I'm overriding webpack config using vue.config.js:
const BundleTracker = require("webpack-bundle-tracker");
module.exports = {
publicPath: 'http://0.0.0.0:8080',
outputDir: './dist/',
chainWebpack: config => {
config.optimization
.splitChunks(false)
config
.plugin('BundleTracker')
.use(BundleTracker, [{ filename: './webpack-stats.json' }])
config.resolve.alias
.set('__STATIC__', 'static')
config.devServer
.public('http://0.0.0.0:8080')
.host('0.0.0.0')
.port(8080)
.hotOnly(true)
.watchOptions({ poll: 1000 })
.https(false)
.headers({ "Access-Control-Allow-Origin": ["*"] })
}
};
The webpack-bundle-tracker plugin generates a file called webpack-stats.json:
{
"status": "done",
"publicPath": "http://0.0.0.0:8080/",
"chunks": {
"app": [
{
"name": "app.js",
"publicPath": "http://0.0.0.0:8080/app.js",
"path": "/Users/me/dev/vue-app/dist/app.js"
}
]
}
}
My problem is that depending on whether I am in development or in production, I want the path to the file to be different.
When I run npm run serve: the generated path should be http://0.0.0.0:8080/app.js (so that the file is served by npm and I can have hot reload etc.)
When I run npm run build: the generated path should be http://0.0.0.0:8000/static/app.js (so that django can serve the file. please note the port number 8000, not 8080)
So I'm wondering if there's a way for vue.config.js to have 2 versions, one that would be used by serve the other one by build.
I know this question is like two years old.
Use the absolute path for the environment variable VUE_CLI_SERVICE_CONFIG_PATH.
You could use $PWD to instead current absolute path.
// package.json
"scripts": {
"serve": "vue-cli-service serve",
"serve:test": "env VUE_CLI_SERVICE_CONFIG_PATH=\"/var/www/html/your_project/vue.config_serve_test.js\" vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
npm run serve:test will use vue.config_serve_test.js
npm run build will use vue.config.js
So, I have the following two files in the root of my vue.js application:
.env.development:
NODE_ENV=development
VUE_WORDPRESS_API=LOCAL
.env.production:
NODE_ENV=production
VUE_WORDPRESS_API=PRODUCTION
I then have the following in my package.json:
"scripts": {
"serve": "vue-cli-service serve --mode development",
"build": "vue-cli-service build --mode production",
},
So, I'm attempting to switch modes and therefore env variables depending on whether I am running $ rpm run serve or $ npm run build.
However, when running npm run serve, inside my application I am seeing that the environment variables aren't being set correctly:
// console.log(process.env.VUE_WORDPRESS_API) <= Undefined
if (process.env.VUE_WORDPRESS_API === 'PRODUCTION') {
axios.defaults.baseURL = window.location.hostname
}
if (process.env.VUE_WORDPRESS_API === 'LOCAL') {
axios.defaults.baseURL = process.env.VUE_WORDPRESS_API_LOCATION
}
I'm wondering, I must have something wrong with my env files? Are they named correctly? What am I missing?
Vue CLI v3 always creating "dist/report.html" when building for production. It's a webpack bundle analyzer report.
I can't find a way to stop building that file.
How to avoid creating "report.html" when building Vue CLI 3 app for production?
Here is my package.json scripts:
"scripts": {
"dev": "npm run serve",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
},
So far the only way I found to disable it is via vue.config.js:
pluginOptions: {
webpackBundleAnalyzer: {
analyzerMode: "disabled"
}
},
Would be good to know why this thing is always on in Vue CLI 3.
I'd like to share some updates as of Vue CLI 3.8.4:
Vue CLI
webpack-bundle-analyzer is a dependency of #vue/cli-service#^3.9.0
By the default, vue-cli-service build does not generate dist/report.html nor dist/report.json
According to Vue CLI documentation:
--report generates the dist/report.html
--report-json generates the dist/report.json. By the way, this JSON file can quickly become huge
Both argument can be cumulated (both report.html and report.json are generated). When I tested, cumulating both arguments make the build time significantly longer
Webpack bundle analyser
The Vue CLI does not automatically run a web server to preview the report files. If you want to the webpack-bundle-analyzer in the standard way, the webpack configuration has to be updated:
// in {root folder}/vue.config.js
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
module.exports = {
configureWebpack: {
plugins: [new BundleAnalyzerPlugin()]
}
};
Even without the --report nor --report-json, the report.html will always be generated and the 8888 port should be available as http://localhost:8888 will be prompted
Make sure that your build npm script does not contain the --report parameter.
"scripts": {
"serve": "vue-cli-service serve",
"lint": "vue-cli-service lint",
"build": "vue-cli-service build",
"report": "vue-cli-service build --report",
}