I have a Vue 2.0 webapplication that runs without problems on my computer, but I can't seem to get it to work on a server without the app running on the root directory.
e.g: 'www.someserver.com/my-app/' instead of 'www.someserver.com/'.
I used the webpack-simple template which has this basic webpack configuration. How can I make sure that the app will load the files from the folder instead of the root?
I figured it out. I indeed had to edit the publicPath entry in my webpack.config.js, like so:
var path = require('path')
var webpack = require('webpack')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
plugins: [new ExtractTextPlugin("main.css")],
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.output.publicPath = '/<REPO_NAME>/dist/';
module.exports.devtool = '#source-map';
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
/*new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),*/
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
Mind the <REPO_NAME> publicPath entry in the production part.
Next, I also had to update the links in my index.html to use the dot-notation instead of just regular relative paths:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>listz-app</title>
<link rel="stylesheet" href="./dist/main.css">
</head>
<body>
<div id="app"></div>
<script src="./dist/build.js"></script>
</body>
</html>
This configuration works to deploy Vue-cli 2.0 webapplication to Github Pages.
On file vue.config.js
module.exports = {
/* ... */
publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/'
}
On file router.js
/* ... */
import { publicPath } from '../vue.config'
/* ... */
export default new Router({
mode: 'history',
base: publicPath,
/* ... */
})
Assuming your server is already serving your html/js bundles when you go to the url you want.... If you are using vue-router, you also need to set the base path there.
const router = new VueRouter({
base: "/my-app/",
routes
})
In VUE 3 with vite:
Inside vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue({
reactivityTransform: true
})
],
base: '/myNewFolder/',
})
More info : https://vitejs.dev/config/#base
I figured it out. I indeed had to edit the publicPath entry in my webpack.config.js, like so:
var path = require('path')
var webpack = require('webpack')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
plugins: [new ExtractTextPlugin("main.css")],
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.output.publicPath = '/<REPO_NAME>/dist/';
module.exports.devtool = '#source-map';
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
/*new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),*/
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
Mind the <REPO_NAME> publicPath entry in the production part.
Next, I also had to update the links in my index.html to use the dot-notation instead of just regular relative paths:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>listz-app</title>
<link rel="stylesheet" href="./dist/main.css">
</head>
<body>
<div id="app"></div>
<script src="./dist/build.js"></script>
</body>
</html>
This configuration works to deploy Vue-cli 2.0 webapplication to Github Pages.
This has recently been a problem for me. And the above solutions did not work.
The below solution works for vue 2.6, and vue-router 3.1
What I did was to add a relative path as as suggested in this git issue in vue.config.js:
module.exports = {
publicPath: './',
// Your config here
}
But this did not the entire solution since router views were not rendered, making it necessary to add a base path in the router. The base path must be the same as the vue.config.js's publicPath, to do so use location.pathname, as suggested in this forum question.
The complete solution in router.js is:
mode: 'history',
base: location.pathname,
routes: [
// Your routes here
]
© 2022 - 2024 — McMap. All rights reserved.
publicPathvariable depending onprocess.env.NODE_ENV. – Catima