Currently, after generating a project with Vue CLI 3 the title is "Vue App".
If I set the title in the created hook via document.title the browser will still will flash "Vue App" prior to displaying the title set via document.title.
Looking for a way to set the HTML title for a Vue CLI 3 generated project without it flashing the default "Vue App" title first.
You can set the title in /public/index.html statically.
Setting it to an empty string in index.html and keeping the update in the hook gets rid of the flashing.
also You can use custom index.html in another way, modify your vue.config.js:
module.exports = {
publicPath: '/',
chainWebpack: config => {
config
.plugin("html")
.tap(args => {
args[0].template = './public/index.html'
return args
})
}
};
You can add postinstall to scripts section in your package.json with next command:
"postinstall": "cp ./public/index.html ./node_modules/#vue/cli-service/lib/config/index-default.html"
Related
I have a VUE2 project and in the public folder I created an iframe.html file that will be loaded in an iframe.
That iframe will also load a javascript.js file that I want encoded/uglified upon "npm run build" but I also want to be able to access it during dev.
How could I proceed?
Should this js file be placed inside the /src/assets/ folder and referenced from the iframe.html file? If yes, any advice?
Or should it stay in the public folder and upod the dist folder being built, encode it with something.
Any solution is welcome, thanks in advance!
Edit: Here are further details of how I use the iframe.
First, I'm referencing the .vue file in the router like so:
{
path: "/pages/:id/edit",
name: "edit",
component: () => import("../views/Edit.vue"),
},
Next, in the Edit.vue file, I add the iframe like so (note how it's referencing iframe.html that is in the public directory):
<iframe
id="iframe"
ref="iframe"
src="iframe.html"
/>
Next, in the iframe.html it's just normal html code, with this part including the javascript.js file (that actually is in the public folder as well for now)
<script src="javascript.js"></script>
You can explicitly include the .js file in your Webpack config by adding a rule for UglifyJsPlugin:
npm i -D uglifyjs-webpack-plugin
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
...
module.exports = {
optimization: {
minimizer: [
new UglifyJsPlugin({
include: /\/regex-for-file/,
minimize: true
})
]
}
...
};
In Vue.config.js, this might look like:
configureWebpack: {
plugins : [
new webpack.optimize.UglifyJsPlugin({
uglifyOptions: {
include: /\/regex-for-file/,
minimize: true
}
)}
]
}
Another option is to use uglify-es; this would allow you to get even more explicit by specifying from where to copy the file during build (assuming you might want the file located outside of src/):
npm i -D uglify-es // CopyWebpackPlugin ships w/ Vue's Webpack conf by default
const UglifyJS = require('uglify-es');
const { resolve } = require('path');
const resolveAbs = (dir) => resolve(__dirname, dir);
new CopyWebpackPlugin([
{
from: resolveAbs('../external'),
to: config.build.assetsSubDirectory
},
{
from: resolveAbs('../src/custom-build-path'),
to: config.build.assetsServerDirectory,
transform: (content, path) => UglifyJS.minify(content.toString()).code;
}
]),
To be able to access it during dev, you can include the path of the js file (relative to your Vue src directory) using the resolve.alias option in the config (so you don't need to deal with possibly ridiculous relative paths in your project). Finally, you can look into webpack's HTML plugin docs for info on importing an external index.html file if needed
I would recommend not putting it in static; by default it will not be minified and built if placed in that directory.
Update/edit: Sorry, I saw a 'uglify' and just assumed you wanted uglify js. As long as the script is in your Vue project directory (or otherwise specified in the Webpack config) the file should be minified during build. Vue has pretty smart defaults for Webpack; assuming the iframe is being referenced somewhere in the app i.e. the dependency graph it will be built.
I have a website with 2 domains like Page1.com and Page2.com. In my manifest.json file i have set the name to Page 1, but when the website is build and published to Page1.com and to Page2.com i want to change the name to be the same as the domain name. But how can i do this in my build step? Today i se Page 1 when i visit Page2.com.
I have tried to change the meta, application-name in my code to get the correct name, but this don't work.
My vue.config
const manifestJSON = require('./public/manifest.json')
module.exports = {
pluginOptions: {
i18n: {
locale: 'en',
fallbackLocale: 'en',
localeDir: 'locales',
enableInSFC: true
}
},
runtimeCompiler: true,
pwa: {
themeColor: manifestJSON.theme_color,
name: manifestJSON.short_name,
msTileColor: manifestJSON.background_color,
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black',
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: 'service-worker.js',
exclude: [
/_redirects$/
]
}
}
}
This site is build with VueJs and use Netlify as host.
So the manifest file is generated by vue-cli every time you build your app. So you shouldn't be using it to seed the vue-config file.
The one file that you could use the way you have shown here would be your package.json file - but it won't hold the values you are looking for.
Your Vue.config file is where you would enter, manually, the pwa info like theme and background color, etc.
To get back to your initial question, you could create two separate build scripts in your package.json, one for page1 and one for page2, and use environment variables to specify the name you ant to use:
"scripts": {
"page1": "env SITE_NAME='Page 1' npm run prod",
"page2": "env SITE_NAME='Page 2' npm run prod",
...
}
Then in your vue.config file, you can use the variable to build your pwa object:
pwa: {
name: process.env.SITE_NAME,
...
}
Finally, you can build your apps by calling
npm run page1
Be careful though: every build will overwrite your public folder! Depending on your context, how/when you build each app, you may have to take additional steps to generate two separate output folders.
The easiest way is to use process.argv to get a command line argument.
For example if you command to run the file is:
node file.js
Then using:
node file.js env_variable_str
Will have process.argv[process.argv.length - 1] === "env_variable_str"
In my case the manifest had to change not just the value but also add/remove a key depending on the argument. So I made a template (manifest_template.json) and used a "build helper" to create the correct manifest based on my argument in the public/ folder. Then I chained this command with npm run build and had another chaining command which made the zip folder.
My workflow: create manifest.json in public -> npm run build -> make zip with correct name
Let me know if you want to see the code!
I created new fresh project with latest VueJS-cli tool. Looks like VueJS CLI is using Webpack 4.43.0.
How to remove that Webpack section, that is visible under browser console/debugging tab?
All code with comments are visible and nothing is striped and uglified.
yarn build shows that it is building for production. Also I tried export NODE_ENV=production
Thanks in advance
I solved.
In : vue.config.js
module.exports = {
configureWebpack: {
devtool: false
}
}
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 have deployed the contents of my /dist folder in the master branch of christopherkade.github.io, which has deployed my website succesfully.
But when I navigate using the navbar (christopherkade.com/posts or christopherkade.com/work) and reload the page I get an error by Github pages:
404 File not found
Note that my routing is done using Vue router like so:
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/work',
name: 'Work',
component: Work
},
{
path: '/posts',
name: 'Posts',
component: Posts
},
{ path: '*', component: Home }
]
})
And my project is built like such:
build: {
// Template for index.html
index: path.resolve(__dirname, '../docs/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../docs'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/**
* Source Maps
*/
productionSourceMap: true,
// 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
}
What could be causing this issue?
But when I navigate using the navbar (christopherkade.com/posts or
christopherkade.com/work) and reload the page 404 File not found
Let me explain why 404 File not found is being shown
When christopherkade.com/posts is triggered from web browser, the machine to which the domain christopherkade.com is mapped is contacted.
The path /posts is searched in its server. in your case, i believe the route for /posts doesn't exist in the server. As the result 404 is displayed
There are few ways to fix this
To prevent the browser from contacting the server when triggering the request christopherkade.com/posts, you can keep mode : 'hash' in your route configuration
How mode : 'hash' works? This is one way to fix your issue
mode : 'hash' makes use of default browser behavior which is to prevent http request from triggering the details that exists after #
As the result, when you trigger christopherkade.com/#/posts , christopherkade.com is being triggered by the browser and once response is received the /posts route from the route config is invoked.
Lets assume that you have control over the server and you are adamant
that you need # to be removed from the URL
Then what you could do is to configure server in such a way that server responds with the same page everytime any paths is being sent. Once response is received in the browser, route will automatically kicked off.
Even in your current program, the routeConfig gets kicked off when you click any links (like work,posts) in your page. This is because the browser behavior is not being invoked at this point.
In your case, you use github for hosting this app with mode: 'history' i myself have to look for a specific solution to workaround this. i will update my answer once i get it.
i hope this was useful.
You can fix this issue by a simple workaround. I combined all the insights from reading multiple issues about this and finally this is what helped me fix this problem.
Solution Logic - You just need a copy of index.html with the name 404.html in the dist folder
Steps to fix
Go to you package.json file, under scripts add a new script called "deploy" like below, you just need to execute this everytime after you build your page. It will automatically take care of the issue.
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"deploy": "cd dist && cp index.html 404.html && cd .. && gh-pages -d dist"
},
This will copy the index.html & rename it 404.html and pushes dist folder under the branch gh-pages and after that your script will appear in the vue ui like below
or
If you are using git subtree push --prefix dist origin gh-pages method to push, then edit the deploy script in package.json to below
"deploy": "cd dist && cp index.html 404.html
and then execute the below git command. PS, don't forget to execute this script before manually using npm script method or from the vue ui
git subtree push --prefix dist origin gh-pages
This actually happens since your browser makes a request to christopherkade.com/posts URL which doesn't exist (this route is defined in Vue application running from index.html).
If you were running your own server, you would probably configure it to render your index.html page for any request URI, so your Vue application would be loaded from any path and handle routing by itself.
Speaking of GitHub pages, you can't just configure them to act the same way I described, but fortunately, there is a workaround which uses custom 404 page:
https://github.com/rafrex/spa-github-pages
As a workaround, I duplicated the index.html and renamed it to 404.html.
In this way, if the page is reloaded, you still get the correct page however this is served through the 404.html file.
As a workaround I have created folders for each route (with a script) and placed the index.html in all of them.
404s still don't work.
If you use Nuxt, this fixes the problem.
layaouts/blank.vue
<template>
<nuxt />
</template>
pages/redirect.vue
<template>
<div></div>
</template>
<script>
export default {
layout: 'blank',
fetch({base, redirect, query}) {
const param = query.p
if (param === undefined) {
return redirect('/')
}
const redirectPath = '/' + param.replace(base, '')
return redirect(redirectPath)
}
}
</script>
static/404.html
<html>
<head>
<script>
var pathName = window.location.pathname;
var redirectPath = '/<repository-name>/redirect';
location.href = redirectPath + '?p=' + encodeURI(pathName);
</script>
</head>
</html>
https://gist.github.com/orimajp/2541a8cde9abf3a925dffd052ced9008
Very simple perfect solution just follow the below instruction
Add a _redirects file inside the /public folder like /public/_redirects
After that add /* /index.html 200 into the _redirects file
I think with this solution your redirect problem will be solved