I'm working on a vue/cli 3 project. My vue.config.js is
module.exports = {
publicPath: process.env.NODE_ENV == 'production' ? '/admin/' : '/',
devServer: {
proxy: {
'/serveradmin': {
target: 'http://localhost:8080/serveradmin',
},
"/assets/*": {
target: "http://localhost:8080/assets",
logLevel: 'debug',
changeOrigin: true,
secure: false,
},
},
},
};
Using curl -v -X "HEAD" http://localhost:8081/assets/css/main.css, I get a 404. The console shows:
App running at:
- Local: http://localhost:8081/
- Network: http://192.168.1.155:8081/
Note that the development build is not optimized.
To create a production build, run npm run build.
[HPM] HEAD /assets/css/main.css -> http://localhost:8080/assets
I've tried fiddling with pathRewrite, and it doesn't change the results. Changing the proxy key to "/assets" doesn't make any difference. What am I doing wrong?
The target property should be the base URL to which the original path is appended. With your current config, the request would be for http://localhost:8080/assets/assets/css/main.css (notice the two assets).
Remove the /assets suffix from your target URL:
// target: "http://localhost:8080/assets",
target: "http://localhost:8080",
Related
while running the yarn serve I don't what to display the port no from the URL. Now, this is showing like https://example.com:8080. I want to access them from https://example.com.
vue.config.js
module.exports = {
chainWebpack: config => {
config.plugins.delete('prefetch');
},
devServer: {
host: 'example.com',
https: false,
port: 8080,
public: 'example.com'
},
}
The yarn serve command opens this port to serve the app locally (for testing / developing).
If you want to create your application, you probably want to run:
yarn run build
See SO - yarn build command
You can then upload the generated files. Look for a build or dist directory or similar.
You can add publicPath to your configuration:
module.exports = {
publicPath: "./",
chainWebpack: config => {
config.plugins.delete('prefetch');
},
devServer: {
host: 'example.com',
https: false,
port: 8080,
public: 'example.com'
},
}
You can try this and see if it works.
See webpack configuration docs
Just open the index.html in the dist folder with live server
My app is created with the vue cli. I can't find any option to disable source maps in production.
The npm build step in my package.json looks like this:
"build": "vue-cli-service build",
In angular, i can just add --prod to my build step to make it work.
Is there any such option for vue.js? Or do I have to change the webpack config (which is hidden by the cli)?
You make changes to the internal webpack config with the vue.config.js file at the project root (you may need to create it manually).
There is a productionSourceMap option so you can disable source maps when building for production:
module.exports = {
productionSourceMap: false
};
like #yuriy636 's answer, if you want only for production :
module.exports = {
productionSourceMap: process.env.NODE_ENV != 'production'
};
In my case the file vue.config.js wasn't taking effect. I had to change config/index.js changing productionSourceMap to false.
Please note that the project was generated a time ago. For the record, I am using a template from Vuetify.
'use strict'
// Template version: 1.2.8
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true,
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: './',
assetsPublicPath: './',
/**
* Source Maps
*/
productionSourceMap: false, // <---- Here
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
I have created a PWA using vue js 2.0 and framework7 and also use Webpack for bundling. I want to use browser-sync to share my project.
I used this config in my webpack.confg file :
new BrowserSyncPlugin({
// browse to http://localhost:3000/ during development,
// ./public directory is being served
host: 'localhost,
port: 3000,
server: { baseDir: ['src'] }
}),
In src/ I have my basic files like index.html, app.vue, app.js.
After using npm run dev command I see this result :
[Browsersync] Access URLs:
----------------------------------
Local: http://localhost:3000
External: http://192.168.1.118::3000
----------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
----------------------------------
[Browsersync] Serving files from: src
After this, localhost:3000 open in my browser and say browsersync: connected but it have showed me a blank page.
Also after I enter website path (http://localhost:3000/en/#!/login) in browser, it showed me Cannot Get /en Error. What is the problem?
Any help will greatly appreciated.
Based on your comment, looks like you are also using webpack-dev-server. In that case you can proxy to it:
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
module.exports = {
// ...
devServer: {
port: 3100
}
// ...
plugins: [
new BrowserSyncPlugin(
// BrowserSync options
{
// browse to http://localhost:3000/ during development
host: 'localhost',
port: 3000,
// proxy the Webpack Dev Server endpoint
// (which should be serving on http://localhost:3100/)
// through BrowserSync
proxy: 'http://localhost:3100/'
},
// plugin options
{
// prevent BrowserSync from reloading the page
// and let Webpack Dev Server take care of this
reload: false
}
)
]
}
My application runs on the subdirectory http://localhost:8080/admin_suffix
suffix is a ENV variable which I can change and define in a .env file.
Once i run the webpack dev server, accessing http://localhost:8080/admin_suffix works.
Clicking on the hyperlinks in the SPA which points other subpaths works too. For example, I can navigate to http://localhost:8080/admin_suffix/subdirectory
However, when i hit reload on http://localhost:8080/admin_suffix/subdirectory, i will get an error "Cannot GET /admin_suffix/subdirectory"
I also cannot enter the subpath into the browser directly to load the page. Only ``http://localhost:8080/admin_suffix` works.
My configuration are as follows:
webpack.base.config.js:
entry: {
main: './src/main',
vendors: './src/vendors'
},
devServer: {
host: '0.0.0.0',
disableHostCheck: true
},
output: {
path: path.join(__dirname, '../dist')
}
webpack.dev.config.js:
module.exports = merge(webpackBaseConfig, {
output: {
publicPath: '/',
filename: '[name].js',
chunkFilename: '[name].chunk.js'
}
});
src/main.js:
const RouterConfig = {
mode: 'history',
routes: Routers,
base: '/admin_suffix/'
}
Enable devServer.historyApiFallback in webpack.base.config.js:
devServer: {
historyApiFallback: true,
// ...
},
This configures webpack-dev-server to fallback to index.html when the route is not found (404).
The Vue app and router are initialized from the main page (index.html), so refreshing the page while on a subroute would normally result in a 404 because the router would not have been setup yet. However, the fallback configuration mentioned above would result in the index.html being served instead, allowing the router to be setup and the subroute to subsequently complete.
I have an existing vue-cli 2 app that I'm attempting to upgrade to vue-cli-3. After adding my unique dependencies, I dropped src/ right into the newly created vue-cli-3 app and started up. woot!
How do I manage [PROD|DEV|TEST].env.js now that we use vue.config.js?
I got the following error because my first attempt to create a vue.config.js was to simply rename config/index.js to be /vue.config.js and keep the existing /config/[PROD|DEV|TEST].env.js but I got the following error:
ERROR Invalid options in vue.config.js: "build" is not allowed. "dev"
is not allowed error Command failed with exit code 1.
I don't understand how environments are now managed.
Thanks for your time!
May be you should use devServer instead. And for build I guess there is another name now.
For example:
module.exports = {
devServer: {
// your settings
}
}
For example:
module.exports = {
devServer: {
proxy: {
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}
}
}
Reference: vue-cli