如何定义 vue.config.js 到生产?
How to define vue.config.js to production?
我已经创建了我的第一个 SPA Vue 项目。它在本地工作,但不在服务器上。我用 node.js 编写了服务器,并从 vue-front 作为 'dist' 进行了生产构建,并将其放入服务器的根目录。
否则它会工作,但是当我刷新浏览器或手动导航到该页面时,我从我的服务器收到错误 unknown endpoint
。在开发阶段我只需要 vue.config.js
module.exports = {
devServer: {
proxy: {
"/api/*": {
target: "http://localhost:3003",
secure: false
}
}
}
}
在我的 router.js 中,我设置了 base: process.env.BASE_URL,这是我创建应用程序时的默认设置。我在某处读到现在应该使用变量 publicPath
?
...
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home,
},
...
那么如何使用 vue.config.js 构建生产环境?
您的快递服务器必须将路由(您的客户端路由)重定向到 index.html
本机 Node.js 示例:
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)
})
或者你可以使用 connect-history-api-fallback middleware for express https://github.com/bripkens/connect-history-api-fallback#usage
或者您也可以像下面这样手动完成
// 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')
})
我已经创建了我的第一个 SPA Vue 项目。它在本地工作,但不在服务器上。我用 node.js 编写了服务器,并从 vue-front 作为 'dist' 进行了生产构建,并将其放入服务器的根目录。
否则它会工作,但是当我刷新浏览器或手动导航到该页面时,我从我的服务器收到错误 unknown endpoint
。在开发阶段我只需要 vue.config.js
module.exports = {
devServer: {
proxy: {
"/api/*": {
target: "http://localhost:3003",
secure: false
}
}
}
}
在我的 router.js 中,我设置了 base: process.env.BASE_URL,这是我创建应用程序时的默认设置。我在某处读到现在应该使用变量 publicPath
?
...
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home,
},
...
那么如何使用 vue.config.js 构建生产环境?
您的快递服务器必须将路由(您的客户端路由)重定向到 index.html
本机 Node.js 示例:
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)
})
或者你可以使用 connect-history-api-fallback middleware for express https://github.com/bripkens/connect-history-api-fallback#usage
或者您也可以像下面这样手动完成
// 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')
})