module.exports = {
publicPath: './src/pages/home/Homepage.vue',
pages: {
'Home': {
entry: 'src/pages/home/main.js',
template: 'public/index.html',
title: 'Home page',
chunks: [ 'chunk-vendors', 'chunk-common', 'Home' ]
},
'Map': {
entry: 'src/pages/map/main.js',
template: 'public/index.html',
title: 'Map page',
chunks: [ 'chunk-vendors', 'chunk-common', 'Map' ]
}
}
}
My app can't seem to get my home page. Am I using the public path correctly? For reference, this is a multipage app. I'm not sure what I should set my base url to since this is the first time I've made anything with Vue. I'm using Vue/Cli. It runs, but says it cannot get my linked page. How do I fix this?
publicPath is for deployment only - it is not path to your (DEV) file system but path following the domain name when the app is deployed.
Documentation
By default, Vue CLI assumes your app will be deployed at the root of a domain, e.g. https://www.my-app.com/. If your app is deployed at a sub-path, you will need to specify that sub-path using this option. For example, if your app is deployed at https://www.foobar.com/my-app/, set publicPath to '/my-app/'
Related
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?
We have a Vue application that we're deploying to a subdirectory: /deploypath/
Right now, we have vue.config.js as:
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
publicPath: process.env.NODE_ENV === 'production'
? '/deploypath/'
: '/',
transpileDependencies: [
'vuetify'
]
})
Here's what's happening: In index.js (router) I have multiple paths configured to return multiple views and components. When a user is logged in, they can access additional pages. When they're not logged in, they're redirected to a (landing page).
I have multiple routes defined:
const routes = [
{
path: '/deploypath',
name: 'feature1',
component: FeatureOneView,
meta: {
title: 'Feature One',
}
},
{
path: '/deploypath/notloggedin',
name: 'notloggedin',
component: NotLoggedInView,
meta: {
title: 'Landing',
}
}
]
const router = new VueRouter({
mode: 'history',
routes: routes
});
Now, the issue I'm running into is that (after deploying a production build) when I visit /deploypath it works, however any other path (e. g. /deploypath/notloggedin) doesn't work. We have an Ubuntu instance running with nginx.
Are we doing something wrong with the Vue config or is there an issue on the nginx side, or other?
In case it helps anyone, a good buddy of mine helped find a solution:
cd /etc/nginx/sites-available
then:
sudo vim <insert your site's conf file here>
then press "i" to edit and within the top-level server { ... } section paste in (replace "dirname" with the name of the subdirectory you're hosting your Vue application in):
location ^~ /dirname {
try_files $uri /dirname/index.html =400;
}
then press escape (esc) on keyboard, then type ":wq" and press enter to save..
Then run:
sudo service nginx restart
then refresh your browser window and hopefully you see your Vue app!
I have a simple Nuxt ssr app with a serverMidlleware handling one api endpoint (/api/contact). To deploy the app I am using pm2.
Running the app in development and in production (locally without pm2) everything works fine. Deploying it on a basic ubuntu server using pm2, the api endpoint becomes unreachable (404 not found).
As pointed out here, the middleware is not included in the .nuxt build. So, I made sure to copy the api directory (where my middleware is located) too.
for pm2 deployment, ecosystem.config.js:
module.exports = {
apps: [
{
name: 'App',
exec_mode: 'cluster',
instances: 'max',
script: './node_modules/nuxt/bin/nuxt.js',
args: 'start'
}
]
}
and inside nuxt.config.js:
serverMiddleware: [
{ path: '/api/contact', handler: '~/api/contact.js' }
]
As only the deployment via pm2 fails, I assume the other files are not of interest. I am assuming this must be related to some sort of pm2 config to find the api folder.
Following my answer here solved the issue here too.
You probably had something missing in your nuxt.config.js file
export default {
ssr: true,
target: 'server',
modules: [
'#nuxtjs/axios',
],
serverMiddleware: [
{ path: '/api', handler: '~/server-middleware/rest.js' },
],
}
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 a vuepress site which lives in my current vuejs app at /docs.
I am building the site into the main /dist folder and deploying them together.
When I am adding a link to the navbar in the .vuepress/config.js file the base is always appended or if adding the full URL it creates an external link.
module.exports = {
base: "/docs/",
dest: "dist/docs",
themeConfig: {
nav: [
{ text: 'Home', link: 'https://myapp.com/'},
{ text: 'Guide', link: '/guide/'}
],
}
}
I can change the way external links are handled, but this is site wide and I do not want this to apply to all links.
In short:
{ text: 'Home', link: '/'} // this is directing to /docs due to base
I would like, for this to direct to myapp.com