I want to use github page on 'vue.js'
I tried to modify /config/index.js file.
build: {
// Template for index.html
index: path.resolve(__dirname, '../docs/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../docs'),
assetsSubDirectory: 'static',
assetsPublicPath: '',
But i can't use github page.
This should work: the "Vue.js / Deployment / Platform Guides GitHub Pages/ " documentation simply adds:
If you are deploying to https://<USERNAME>.github.io/<REPO>/, (i.e. your repository is at https://github.com/<USERNAME>/<REPO>), set publicPath to "/<REPO>/".
For example, if your repo name is "my-project", your vue.config.js should look like this:
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/my-project/'
: '/'
}
toast38coza illustrates that setup in his blog post:
Step 1: Setup the build system to build to /docs
Edit: config/index.js
find ../dist replace with ../docs
change assetsPublicPath: '/', to: assetsPublicPath: './',
Run:
npm run build
You should now have a docs folder in your project. Add and push to GitHub.
Check if those settings work better in your case.
Related
I have purchased this VUE template. From its documentation, if I run npm run install && npm run dev. It looks correct
When I execute npm run build to get my production ready project. As you can see, it does not look the same:
I have checked the css links inside of the generated HTML, and there is only one pointing to "a file". I believe is the right one...(?)
Here is vue.config.js:
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? './' : './',
outputDir: 'dist',
assetsDir: 'app',
indexPath: 'index.html',
configureWebpack: {
devtool: 'source-map'
},
}
My env.production looks like:
NODE_ENV=production
VUE_APP_TITLE=My Base Front End
What am I missing on the config file?
Try adding below code for tag stylesheet_pack_tag in your layout file :
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
I can recall similar issue from past experience.
I can't find documentation on how to minimize assets and produce *.min.js files using vue cli.
Im using vue cli version 4.2.3.
I require the extention to be *.min.js for rollbar to function correctly.
How would you go about configuring vue cli to produce minimized assets? (no TS involved).
I'm sure Vue CLI minifies JS output when running build in production mode. It's just using different naming convention (no "min.js")
To tweak file names of JS chunks produced by Vue CLI, you can do the following:
Check the default Webpack config Vue CLI uses by running vue inspect on command line (dev mode) or vue inspect --mode production (production mode)
Look for an output (should be near the beginning of the output). In my project it looks like this:
Dev mode:
output: {
path: '.....some dir\\dist',
filename: 'js/[name].js',
publicPath: '/',
chunkFilename: 'js/[name].js'
},
Production mode:
output: {
path: '.....some dir\\dist',
filename: 'js/[name].[contenthash:8].js',
publicPath: '/',
chunkFilename: 'js/[name].[contenthash:8].js'
},
Now you can tweak it - add vue.config.js to your project if you don't have it already and add following:
module.exports = {
configureWebpack: config => {
if(process.env.NODE_ENV === "production") {
config.output.filename = 'js/[name].[contenthash:8].min.js'
config.output.chunkFilename = 'js/[name].[contenthash:8].min.js'
} else {
config.output.filename = 'js/[name].js'
config.output.chunkFilename = 'js/[name].js';
}
}
}
[name] and [contenthash:8] are Webpack placeholders - more info in documentation
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'm trying to integrate a vue project that I built with the vue cli into an existing .net app. I'm very new to vue, so I'm trying to follow guides and such, but am left with lots of questions.
While trying to compile this, I found that the vue cli-service node module has the following for setting the main.js file located in it's base.js file.
webpackConfig
.mode('development')
.context(api.service.context)
.entry('app')
.add('./src/main.js')
.end()
.output
.path(api.resolve(options.outputDir))
.filename(isLegacyBundle ? '[name]-legacy.js' : '[name].js')
.publicPath(options.publicPath)
I need to override this since my .net app doesn't have a src directory and the usage of this vue app won't follow that path structure. I'm not seeing a way to do it in my vue.config.js file. I would expect that if I can override it, that would be the spot.
I could overwrite the base.js file where this exists, but when a co-worker runs npm install, they would get the default value rather than what I have. The only option I see there is checking in all the node modules to git which we really don't want to do.
For anyone in a similar situation, I found what worked for me. It's not the ideal solution due to the fact that it forces you to build into a js folder. That resulted in the file being put in Scripts\build\vue\js. Would be nice to be able to just dump it in the vue folder, but at least this works. Code below.
vue.config.js
module.exports = {
publicPath : "/",
outputDir: "Scripts/build/vue", //where to put the files
// Modify Webpack config
// https://cli.vuejs.org/config/#chainwebpack
chainWebpack: config => {
// Not naming bundle 'app'
config.entryPoints.delete('app'); //removes what base.js added
},
// Overriding webpack config
configureWebpack: {
// Naming bundle 'bundleName'
entry: {
quote: './Scripts/Quote/index.js' //where to get the main vue app js file
},
optimization: {
splitChunks: false
}
},
filenameHashing: false,
pages: {
quoteApp: { //by using pages, it allowed me to name the output file quoteApp.js
entry: './Scripts/Quote/index.js',
filename: 'index.html'
}
}
}
I need some assistance or at least to be pointed in the right direction. I am attempting to deploy a vuejs app using Vue CLI 3. When I run the build command the files are built into the dist folder, which works fine. There is also a js and css folder inside dist that contain the respective files. In my index.html is created the paths as /css/app.css or /js/app.js. I want the files to just be placed in the dist folder along with index.html and the paths to read simply app.css or app.js. My goal is to remove the /css/.
I am assuming this is accomplished in the vue.config.js by configuring webpack. I can’t seem to figure this out. I understand the baseURL setting but I can figure this part out..any help would be appreciated.
Thanks
it's answered here
https://github.com/vuejs/vue-cli/issues/1967
basically config should look like this
module.exports = {
chainWebpack: (config) => {
config.module
.rule('images')
.use('url-loader')
.tap(options => Object.assign({}, options, {
name: '[name].[ext]'
}));
},
css: {
extract: {
filename: '[name].css',
chunkFilename: '[name].css',
},
},
configureWebpack: {
output: {
filename: '[name].js',
chunkFilename: '[name].js',
}
}
};