Ufdjrw

What does chmod -u do?

Pre-mixing cryogenic fuels and using only one fuel tank

Electoral considerations aside, what are potential benefits, for the US, of policy changes proposed by the tweet recognizing Golan annexation?

Lowest total scrabble score

A social experiment. What is the worst that can happen?

Yosemite Fire Rings - What to Expect?

Why can Carol Danvers change her suit colours in the first place?

Intuition of generalized eigenvector.

Aragorn's "guise" in the Orthanc Stone

When were female captains banned from Starfleet?

Are paving bricks differently sized for sand bedding vs mortar bedding?

Does an advisor owe his/her student anything? Will an advisor keep a PhD student only out of pity?

How can "mimic phobia" be cured or prevented?

What does routing an IP address mean?

How to indicate a cut out for a product window

Travelling outside the UK without a passport

Biological Blimps: Propulsion

How should I respond when I lied about my education and the company finds out through background check?

Why should universal income be universal?

What is this called? Old film camera viewer?

Are the IPv6 address space and IPv4 address space completely disjoint?

What is this cable/device?

Store Credit Card Information in Password Manager?

Which one is correct as adjective “protruding” or “protruded”?

How to define vue.config.js to production?

How to validate an email address in JavaScript?How do JavaScript closures work?How do I check if an element is hidden in jQuery?How do I remove a property from a JavaScript object?How do I redirect to another webpage?How do I include a JavaScript file in another JavaScript file?How to replace all occurrences of a string in JavaScriptHow to check whether a string contains a substring in JavaScript?How do I remove a particular element from an array in JavaScript?How do I return the response from an asynchronous call?

1

I have created my first SPA Vue project. It works locally, but not on a server. I wrote the server with node.js and made a production build from vue-front as 'dist' and put it to root of server.

It works otherwise, but when I refresh the browser or manually navigate to the page, I get the error unknown endpoint from my server. In stage of development I needed only this in vue.config.js

module.exports = 
 devServer: 
 proxy: 
 "/api/*": 
 target: "http://localhost:3003",
 secure: false
 
 
 

In my router.js I have set base: process.env.BASE_URL, which came as default when I created the app. I read somewhere that nowadays one should use a variable publicPath?

...
Vue.use(Router)

export default new Router({
 mode: 'history',
 base: process.env.BASE_URL,
 routes: [
 
 path: '/',
 name: 'home',
 component: Home,
 ,
...

So how do I build for production with vue.config.js?

javascript vue.js vue-router

share|improve this question

edited Mar 7 at 16:51

Jost

5018

asked Mar 7 at 7:39

MikkoMikko

104

add a comment | 

1

I have created my first SPA Vue project. It works locally, but not on a server. I wrote the server with node.js and made a production build from vue-front as 'dist' and put it to root of server.

It works otherwise, but when I refresh the browser or manually navigate to the page, I get the error unknown endpoint from my server. In stage of development I needed only this in vue.config.js

module.exports = 
 devServer: 
 proxy: 
 "/api/*": 
 target: "http://localhost:3003",
 secure: false
 
 
 

In my router.js I have set base: process.env.BASE_URL, which came as default when I created the app. I read somewhere that nowadays one should use a variable publicPath?

...
Vue.use(Router)

export default new Router({
 mode: 'history',
 base: process.env.BASE_URL,
 routes: [
 
 path: '/',
 name: 'home',
 component: Home,
 ,
...

So how do I build for production with vue.config.js?

javascript vue.js vue-router

share|improve this question

edited Mar 7 at 16:51

Jost

5018

asked Mar 7 at 7:39

MikkoMikko

104

add a comment | 

I have created my first SPA Vue project. It works locally, but not on a server. I wrote the server with node.js and made a production build from vue-front as 'dist' and put it to root of server.

It works otherwise, but when I refresh the browser or manually navigate to the page, I get the error unknown endpoint from my server. In stage of development I needed only this in vue.config.js

module.exports = 
 devServer: 
 proxy: 
 "/api/*": 
 target: "http://localhost:3003",
 secure: false
 
 
 

In my router.js I have set base: process.env.BASE_URL, which came as default when I created the app. I read somewhere that nowadays one should use a variable publicPath?

...
Vue.use(Router)

export default new Router({
 mode: 'history',
 base: process.env.BASE_URL,
 routes: [
 
 path: '/',
 name: 'home',
 component: Home,
 ,
...

So how do I build for production with vue.config.js?

javascript vue.js vue-router

share|improve this question

edited Mar 7 at 16:51

Jost

5018

asked Mar 7 at 7:39

MikkoMikko

104

module.exports = 
 devServer: 
 proxy: 
 "/api/*": 
 target: "http://localhost:3003",
 secure: false
 
 
 

...
Vue.use(Router)

export default new Router({
 mode: 'history',
 base: process.env.BASE_URL,
 routes: [
 
 path: '/',
 name: 'home',
 component: Home,
 ,
...

share|improve this question

edited Mar 7 at 16:51

Jost

5018

asked Mar 7 at 7:39

MikkoMikko

104

share|improve this question

edited Mar 7 at 16:51

Jost

5018

asked Mar 7 at 7:39

MikkoMikko

104

edited Mar 7 at 16:51

Jost

5018

edited Mar 7 at 16:51

Jost

5018

asked Mar 7 at 7:39

MikkoMikko

104

asked Mar 7 at 7:39

MikkoMikko

104

1 Answer
1

active

oldest

votes

0

Your express server has to redirect the routes(your client routes) to index.html

Native Node.js example:

 const http = require('http')
 const fs = require('fs')
 const httpPort = 80

 http.createServer((req, res) => 
 fs.readFile('index.htm', 'utf-8', (err, content) => 
 if (err) 
 console.log('We cannot open "index.htm" file.')
 

 res.writeHead(200, 
 'Content-Type': 'text/html; charset=utf-8'
 )

 res.end(content)
 )
 ).listen(httpPort, () => 
 console.log('Server listening on: http://localhost:%s', httpPort)
 )

or you can use connect-history-api-fallback middleware for express https://github.com/bripkens/connect-history-api-fallback#usage

Or you can do it by hands like following

// Server index.html page when request is made
const clientRoutes = ['/', '/home', 'login', 'workspace']
app.get(clientRoutes, function (req, res, next) 
 res.sendfile('./public/index.html')
 )

share|improve this answer

edited Mar 7 at 7:50

answered Mar 7 at 7:45

Igor LitvinovichIgor Litvinovich

1,022413

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  connect-history-api-fallback works fine. Thank you!
  
  – Mikko
  Mar 7 at 10:34
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Mikko If it helped you, mark this as the answer, please.
  
  – Igor Litvinovich
  Mar 7 at 12:51
  
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55038432%2fhow-to-define-vue-config-js-to-production%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Your express server has to redirect the routes(your client routes) to index.html

Native Node.js example:

 const http = require('http')
 const fs = require('fs')
 const httpPort = 80

 http.createServer((req, res) => 
 fs.readFile('index.htm', 'utf-8', (err, content) => 
 if (err) 
 console.log('We cannot open "index.htm" file.')
 

 res.writeHead(200, 
 'Content-Type': 'text/html; charset=utf-8'
 )

 res.end(content)
 )
 ).listen(httpPort, () => 
 console.log('Server listening on: http://localhost:%s', httpPort)
 )

or you can use connect-history-api-fallback middleware for express https://github.com/bripkens/connect-history-api-fallback#usage

Or you can do it by hands like following

// Server index.html page when request is made
const clientRoutes = ['/', '/home', 'login', 'workspace']
app.get(clientRoutes, function (req, res, next) 
 res.sendfile('./public/index.html')
 )

share|improve this answer

edited Mar 7 at 7:50

answered Mar 7 at 7:45

Igor LitvinovichIgor Litvinovich

1,022413

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  connect-history-api-fallback works fine. Thank you!
  
  – Mikko
  Mar 7 at 10:34
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Mikko If it helped you, mark this as the answer, please.
  
  – Igor Litvinovich
  Mar 7 at 12:51
  
  

  
  
  
  

add a comment | 

0

Your express server has to redirect the routes(your client routes) to index.html

Native Node.js example:

 const http = require('http')
 const fs = require('fs')
 const httpPort = 80

 http.createServer((req, res) => 
 fs.readFile('index.htm', 'utf-8', (err, content) => 
 if (err) 
 console.log('We cannot open "index.htm" file.')
 

 res.writeHead(200, 
 'Content-Type': 'text/html; charset=utf-8'
 )

 res.end(content)
 )
 ).listen(httpPort, () => 
 console.log('Server listening on: http://localhost:%s', httpPort)
 )

or you can use connect-history-api-fallback middleware for express https://github.com/bripkens/connect-history-api-fallback#usage

Or you can do it by hands like following

// Server index.html page when request is made
const clientRoutes = ['/', '/home', 'login', 'workspace']
app.get(clientRoutes, function (req, res, next) 
 res.sendfile('./public/index.html')
 )

share|improve this answer

edited Mar 7 at 7:50

answered Mar 7 at 7:45

Igor LitvinovichIgor Litvinovich

1,022413

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  connect-history-api-fallback works fine. Thank you!
  
  – Mikko
  Mar 7 at 10:34
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Mikko If it helped you, mark this as the answer, please.
  
  – Igor Litvinovich
  Mar 7 at 12:51
  
  

  
  
  
  

add a comment | 

Your express server has to redirect the routes(your client routes) to index.html

Native Node.js example:

 const http = require('http')
 const fs = require('fs')
 const httpPort = 80

 http.createServer((req, res) => 
 fs.readFile('index.htm', 'utf-8', (err, content) => 
 if (err) 
 console.log('We cannot open "index.htm" file.')
 

 res.writeHead(200, 
 'Content-Type': 'text/html; charset=utf-8'
 )

 res.end(content)
 )
 ).listen(httpPort, () => 
 console.log('Server listening on: http://localhost:%s', httpPort)
 )

or you can use connect-history-api-fallback middleware for express https://github.com/bripkens/connect-history-api-fallback#usage

Or you can do it by hands like following

// Server index.html page when request is made
const clientRoutes = ['/', '/home', 'login', 'workspace']
app.get(clientRoutes, function (req, res, next) 
 res.sendfile('./public/index.html')
 )

share|improve this answer

edited Mar 7 at 7:50

answered Mar 7 at 7:45

Igor LitvinovichIgor Litvinovich

1,022413

 const http = require('http')
 const fs = require('fs')
 const httpPort = 80

 http.createServer((req, res) => 
 fs.readFile('index.htm', 'utf-8', (err, content) => 
 if (err) 
 console.log('We cannot open "index.htm" file.')
 

 res.writeHead(200, 
 'Content-Type': 'text/html; charset=utf-8'
 )

 res.end(content)
 )
 ).listen(httpPort, () => 
 console.log('Server listening on: http://localhost:%s', httpPort)
 )

// Server index.html page when request is made
const clientRoutes = ['/', '/home', 'login', 'workspace']
app.get(clientRoutes, function (req, res, next) 
 res.sendfile('./public/index.html')
 )

share|improve this answer

edited Mar 7 at 7:50

answered Mar 7 at 7:45

Igor LitvinovichIgor Litvinovich

1,022413

answered Mar 7 at 7:45

Igor LitvinovichIgor Litvinovich

1,022413

answered Mar 7 at 7:45

Igor LitvinovichIgor Litvinovich

1,022413