There is a requirement of SEO optimization in nuxt.js project. It requires every route inside the project need add a trailing slash. How to solve the problem?
By the way, there is a question about it, but the accepted answer is not right for me. the question link is here:
Hi :) You need install #nuxtjs/redirect-module and add below rule to nuxt.config.js.
redirect: [
{
from: '^.*(?<!\/)$',
to: (from, req) => req.url + '/'
}
]
My answer is based on antonku's answer.
The answer from #kanapka94 is correct but incomplete. You need to add the module to your modules attribute in your nuxt configuration, e.g:
modules: [
'#nuxtjs/redirect-module',
]
Related
I need some guidance. I am experiencing an issue where webpack throws an error that it can not find a module . I was trying to add a require statement of a package(included as dependency). I got it working in another project where I don't need webpack. The code looks basically as follows:
context.subscriptions.push(
vscode.commands.registerCommand("vstodo.helloWorld", () => {
vscode.window.showInformationMessage(
"test"
);
const sfdx = require('sfdx-node');
sfdx.auth.web.login({
setdefaultdevhubusername: true,
setalias: 'HubOrg'
})
.then(() => {
// Display confirmation of source push
console.log('Source pushed to scratch org');
});
}));
My webpack config can be found here
I uploaded a simplified version of the repository here Repository
containing all the configuration files for rollup and webpack.
If I leave out the part starting at the require statement everything works again.
Any help on how to tackle this would be much appreciated, thanks
The vscode extension page has a short troubleshooting guide about this: https://code.visualstudio.com/api/working-with-extensions/bundling-extension#webpack-critical-dependencies.
They suggest the following solutions:
Try to make the dependency static so that it can be bundled.
Exclude that dependency via the externals configuration. Also make sure that those JavaScript files aren't excluded from the packaged extension, using a negated glob pattern in .vscodeignore, for example !node_modules/mySpecialModule.
Script is loading just fine in other pages but not loading on dynamic pages in NuxtJS. My nuxt.config.js file reference -
head: {
script:[
{ src: 'test.min.js' }
],
}
[NB] The test.min.js file is in root of static directory.
Dynamic route e.g. products/_slug/index.vue
GET http://localhost:3000/products/abc-def/test.min.js net::ERR_ABORTED 404 (Not Found)
Can you please help me resolve this issue? Thank you.
Try to specify an absolute path with something like
/test.min.js
#/test.min.js // or maybe this one
##/test.min.js // or even this one
You have to specify an absolute path as kissu mentioned and also you can try this:
~/test.min.js
In many times it works too
I am a beginner of Vue and I am trying to build a multi-page web application with Vue for practice. But I am having this problem below:
Failed to compile.
./src/index/views/Home.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/index/views/Home.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '#/components/HelloWorld.vue' in '/home/Username/Web/wk_front_end/src/index/views'
Here is the file tree of my project, every file is generated by Vue because I only want to test the multi-page, so I think it wouldn't be a coding problem.
Here is what I did:
I created a folder called the index under the src folder, I then move all the files and folders that originally under src to index because I wish the components and assets are only used in the corresponding page.
My vue.config.js is:
module.exports = {
pages: {
index: {
entry: "src/index/main.js",
template: "src/index/index.html",
filename: "index.html",
title: "Index Page"
},
}
}
When I try to run it, I got the error above on the chrome window. And actually, the error is:
I think it might be caused by missing of configurations, but I really cannot figure out what those other configurations I need.
Does anyone have similar problem before? Does anyone know how to solve it? Or, does anyone have some successful multi-page example that I could take a look?
Really thanks for the help.
I believe # is a shortcut for the src folder. Which would mean your current path resolves to src/components/HelloWorld.vue.
You could try doing #/index/components/HelloWorld.vue, which should be the correct path.
From my sight you may be importing your Vue components incorrectly. If you want to make multi-page-app why don't you try vue-router ? Maybe it's not the direct solution for your problem but it will help you to better manage your pages (routes) in the future.
Using the Vuepress Blog plugin for a Vuepress blog website, is there a way to have posts at the root of the website?
E.g. I have foo.com with a post named post-1. I can show a PostIndex at foo.com/ but when I click on a post it goes to foo.com/posts/post-1. What I want is for a post to be at foo.com/post-1
I tried moving my posts out of the /posts folder into the project root and in the following config.js
plugins: [
[
'#vuepress/blog',
{
directories: [
{
id: 'post',
// dirname: 'posts',
dirname: '/',
path: '/',
// Avoid dates in URLs
itemPermalink: '/:regular'
}
]
}
]
]
I tried to change directories[0].dirname to /. This results in a "Page Not Found".
I know I can have post-1 at the root in Vuepress without the Blog plugin, but I'm trying to use the Blog plugin's pagination and other features.
If anyone else is having this issue, it seems to be that the directories[0].itemPermalink: '/:regular' makes the permalink not work. Changing to directories[0].itemPermalink: '/:slug' solves the issue.
Internally, Vuepress Blog plugin must be checking for the string "slug".
My project structure is as follows:
I have the following webpack config file:
module.exports = {
context: __dirname + "/resources",
entry: "./js/entry.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
]
}
};
and open up my entry.js file with
require('./style.scss');
I understand this specific arrangement might not be working, but i have been trying different permutations and setups and configurations for over an hour and just can't seem to get webpack to find my .scss file.
Can someone please tell me how the webpack config file should be set up in my case?
Cheers.
edit,
trying to go up two levels in my require,
require('../../scss/style.scss')
still gives me,
Similarly for
require('../scss/style.scss');
The problem is in the require statement
require('./style.scss');
It will search for your style file inside the resources/js directory in reference to your entry.js file try requiring your style using this:
require('../scss/style.scss');
Try to use path module for resolving the context path:
var path = require('path');
...
context: path.resolve("resources"),
...
Let me know if the problem resolved.
Well I feel like a complete idiot, after renaming files and folders numerous times and trying different permutations of my require statement, I noticed the error seems to constantly state
Can't resolve 'style' in ...
Turns out i had not installed style-loader and css-loader into my project having though they were bundled with the sass-loader. (it's actually noted on the npm page), running
npm install css-loader style-loader -D
in my project directory solved the issue.
Still, thanks for your suggestions, and I hope this might help someone in the future.