Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 months ago.
This post was edited and submitted for review 9 months ago and failed to reopen the post:
Original close reason(s) were not resolved
Improve this question
I have deployed my nuxtjs application on Layer0 using the following command layer0 deploy --site=sample-website --environment=production. I used Nuxt Sitemap Module to generate sitemap.xml for my nuxtjs app. It works fine in the dev environment (http://127.0.0.1:3000/sitemap.xml) but in the production environment, I cannot find it.
nuxt.config.js :
export default {
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
'#nuxtjs/sitemap',
],
sitemap: {
hostname: 'https://sathyamolagoda.me',
path: '/sitemap.xml',
defaults: {
lastmod: new Date(),
changefreq: 'weekly',
priority: 0.8,
},
},
}
npm run generate will create the following file ".nuxt\dist\sitemap-routes.json" but it is not available in the .layer0 folder which is deployed to the production environment.
What would be the issue, have I missed anything?
By default layer0 configuration not include ".nuxt/dist/sitemap-routes.json" file into .layer0 path. In order to fix this we have to add few code lines to layer0.config.js.
'use strict'
// This file was automatically added by layer0 deploy.
// You should commit this file to source control.
module.exports = {
backends: {
origin: {
domainOrIp: 'layer0-origin.example.com',
},
},
includeNodeModules: true,
connector: '#layer0/nuxt',
// include the required file
includeFiles: {
'.nuxt/dist/sitemap-routes.json': true,
},
}
then the file will be there as below
If you are using SSR with Nuxt, let Nuxt serve the sitemap instead of the static file you would had created with npm run generate. Add the following to your Layer0 router:
.match('/sitemap.xml', ({ renderWithApp }) => {
renderWithApp()
})
I've updated our documentation with this information: https://docs.layer0.co/guides/nuxt#serving-sitemap-with-ssr
Related
i have Nuxt project, when i try to add or edit message property it's not reflect direct, i should terminate the app and re-run it to see the results.
i followed the Nuxt Documentation and applied every single step
Edit your nuxt.config.js modules to look like this
modules: [
[
"#nuxtjs/i18n",
{
locales: [{ code: "en", name: "en-US", file: "en.json" }],
langDir: "locales/"
}
],
]
assuming your strings file is called en.json and it's inside locales/ like locales/en.json
Where I work we have one .net web site with 3 different mvc areas which are for each type of user we work with. Clients, Recruiters and Employees. I'd like to recreate this in vue where it's one vue project but a separate client app, recruiter app and employee app. Using the vue.config.js file I'm able to do that.
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
pages: {
app1: {
entry: 'src/clients/main.js',
template: 'public/client.html',
filename: 'client.html',
title: 'Clients',
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
app2: {
entry: 'src/recruiters/main.js',
template: 'public/recruiter.html',
filename: 'recruiter.html',
title: 'Recruiters',
chunks: ['chunk-vendors', 'chunk-common', 'index']
}
}
})
This works fine when I build a production version of the site with the cli. However I cannot get it to work properly when I run the local dev version. Here's a screenshot of my project (using webstorm).
Before I set up all of the separate apps, when I would run vue-cli-service serve the public index.html file would get the main.js file from the src folder injected into it. I am trying to get the same thing happening for the Clients and Recruiters folder where the recruiters/main.js file get injected into the public/recruiter.html file and so on for clients. For now, I'm guessing because of the vue.config.js file, it no longer injects the src/main.js into the public/index.html file.
Is there a setting for the cli to do this? Or a config file I'm missing?
When you generate a PWA app using vue ui you can expect the following behavior.
All files you have in your dist folder are precached by browsers.
In other words, when you navigate to your app a browser will quietly download all the files and cache it for further use.
The problem here is that browsers will also download async chunks which could never be used by a user. For example, I have an admin-settings route and a regular user does not need to download it at all.
Now I'm trying to disable this behavior, here's modified vue.config.js file:
module.exports = {
chainWebpack: config => {
config.plugins.delete('prefetch-index')
config.plugins.delete('preload-index')
},
pwa: {
workboxOptions: {
exclude: [/.*/],
runtimeCaching: [{
urlPattern: new RegExp('^https://example.com.*'),
handler: 'CacheFirst',
options: {
cacheableResponse: {
statuses: [200]
}
}
}]
}
},
...
}
Right now everything works as expected and browsers do not prefetch resourses. The problem, however, is that when I upload a new version of a file the app is not updated. Browsers still use the previos version of the file.
I'm stuck, any advice, good sirs?
P.S. Figured it out.
This line caused index.html to be also cached.
urlPattern: new RegExp('^https://example.com.*')
After changing it everything works as expected.
urlPattern: new RegExp('^https://example.com/.+')
Now the problem is that the old version of a cached file is not deleted from cache. The size of cache would grow a lot with each new deployment.
Any advice?
I have a Nuxt project. Everything is OK when I generate a static page.
However, I need to send a POST request to the other server.
I tried to use both a proxy in nuxt.config.js and just direct query, but after deploy to the ngnix eventually, nothing works.
Please help.
UPDATE. Steps to reproduce.
Create Nuxt App including axios and proxy
Configure your proxy for other webservice:
proxy: {
'/api': {
target: 'http://example.com:9000',
pathRewrite: {
'^/api': '/',
},
},
changeOrigin: true,
},
call this service somewhere in the code:
const result = await this.$axios.post('/api/email/subscribe', {email: email})
run "yarn dev" and test the service. It works locally properly.
run 'nuxt generate' and deploy the static code hosting service, for example, hosting.com
run your page which calls the above-mentioned service.
As a result, instead of making POST call to the hosting.com/api/email/subscribe, it calls localhost:3000/api/email/subscribe.
Be sure to install the nuxt versions of axios and proxy in your project #nuxt/axios and #nuxtjs/proxy
after that in your nuxt.config.js add axios as module plus this options for axios and proxy:
modules: [
// Doc: https://axios.nuxtjs.org/usage
'#nuxtjs/axios',
//more modules if you need
],
/*
** Axios module configuration
*/
axios: {
proxy: true,
// See https://github.com/nuxt-community/axios-module#options
},
proxy: {
'/api/': {
target: process.env.AXIOS_SERVER, // I use .env files for the variables
pathRewrite: { '^/api/': '' }, //this should be your bug
},
},
now you can use axios in any part of the code like this
const result = await this.$axios.post('/api/email/subscribe', {email: email})
it will internally resolve to AXIOS_SERVER/email/subscribe without cause cors issues.
EXTRA: test enviroments in local using multiples .env files
you can configure .env for dev and .env.prod for production, after that in local you can use yarn build && yarn start for test your app with your production enviroment. You only need add this at the top of your nuxt.config.js file
const fs = require('fs')
const path = require('path')
if (process.env.NODE_ENV === 'production' && fs.existsSync('.env.prod')) {
require('dotenv').config({ path: path.join(__dirname, `.env.prod`) })
} else {
require('dotenv').config()
}
By definition on the Nuxt docs page what nuxt generate does is: Build the application and generate every route as a HTML file (used for static hosting).
Therefore, using proxy is out of question here. Take note that you path is not even being rewritten.
And probably the result you're looking for is not hosting.com/api/email/subscribe (wit /api), but hosting.com/email/subscribe.
Nevertheless, if you use nginx then I don't think you should use Nuxt's proxy option. Nginx is built just for that so point your API calls there and in nginx config file just declare where it should point further.
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'
}
}
}