I'm setting up a basic vue app with vuetify/vue-router, and when loading the base url '/', everything works fine. I can click a to /manage/products without any problem.
However, when loading /manage/products directly by typing in the address bar, I get this error:
Failed to load resource: the server responded with a status of 404 (Not Found)
It seems to want to load /manage/dist/build.js instead of /dist/build.js.
Can I change my webpack.config.js to make sure the right build.js is called?
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
resolve: {
extensions: ['.js', '.vue'],
alias: {
'#' : path.resolve(__dirname, './src'),
'vue$': 'vue/dist/vue.esm.js',
'public': path.resolve(__dirname, './public')
}
}
vue-router 'hash' mode works, but I would like to use 'history' mode for cleaner URLs.
For reference: I've used this template
vue init vuetifyjs/webpack-simple
EDIT:
I've found the solution.
The vuetifyjs/webpack-simple template had a misconfiguration from the start.
Inside index.html I've changed:
<script src="./dist/build.js"></script>
to
<script src="/dist/build.js"></script>
And made sure that these options were present inside webpack.config.js:
devServer: {
historyApiFallback: true
},
vue-router 'hash' mode works, but I would like to use 'history' mode for cleaner URLs
The point of the History API is to allow you to map DOM-generated and server-generated pages onto each other.
This means that if JavaScript fails for any reason, then the server can deliver the page instead. This means that if someone deep links to a page on your site, then the server can just deliver that page (as opposed to delivering the homepage, and then using JavaScript to mutate it into the desired page).
You need to write server-side code that will deliver the page.
Related
I have a working web worker script that fails due to webpackJsonp undefined. Ideally I would like to make the web worker script not rely on webpack and just be output to the build directory without changes. If not, another option would be to figure out how to get the web worker working through webpack.
My webpack config sets up the output like so:
entry: {
home: './src/index.js',
audioWorker: './src/user/core/components/audio/sources/worker/viewer-websocket-audio.worker.js'
},
output: {
path: './build',
publicPath: '/',
filename: 'app.dev.[name].[chunkhash].js'
},
I would like to integrate Vue in my .net MVC project. I've installed Vue using the CLI and added the following vue.config.js:
module.exports = {
devServer: {
proxy: {
'/': {
target: 'http://mvcsite.local',
changeOrigin: true
}
},
disableHostCheck: true
},
runtimeCompiler: true
};
The proxy works fine, except that a request to the root http://localhost:8080 (which the dev server runs at) serves the index.html generated by Vue, rather than proxying the request to the root of http://mvcsite.local. How do I proxy that particular request?
As indicated in your comment, there is an open issue on github for this, so currently there seems to be no fix. In my case (ASP.NET MVC 4) I solved the problem using a workaround. I simply move the root dir to /Home in development environment. Of course your server backend has to support this scenario, but that's usually the smaller problem. My working vue.config.js for #vue/cli 3 looks like this:
module.exports = {
publicPath: "/Home",
devServer: {
publicPath: "/Home",
proxy:
{
'^/Home/*': {
target: 'http://localhost:50353/',
ws: true,
changeOrigin: true
}
},
}
I am working on a NUXTJs to create server side rendered website. My question is that although there is a assets/static folder in nuxt project structure to serve images & static files, i want to set cdn link for all my image source.
What would be the best approach to do that?
Possible ways I can think of:
Vuex Store - set baseURL for the images and then use in components
env - use environment variable to set the cdn URL
TIA
You can set it via publicPath property in nuxt.config
export default {
build: {
publicPath: 'https://cdn.nuxtjs.org'
}
}
https://nuxtjs.org/api/configuration-build/#publicpath
If you have a team working on the project, use Vuex. It save the baseURL in the project itself. Less hassle to copy/share the env variables to the team.
Alright after spending a couple of hrs, As answered above you can set cdn url to nuxt.config.js file. If you are someone like me who is using CloudFront / S3 bucket, After npm run build. you can create nuxt folder to your s3 bucket and upload everything from .nuxt/dist/client to this folder. the public path looks as follows in nuxt config file
build: {
publicPath: 'https://your-cdn-url.net/nuxt'
}
But for PWA,manifest.json file it is important that the manifest is served from the same domain, and not from the CDN.so you'll have to override the public path.you can find more info here
I'm using nuxt 2.15,syntax has to be exactly like as follows. nuxt.config.js
modules: [
[
'#nuxtjs/pwa',
{
workbox: { publicPath: '/_nuxt/' },
manifest: { publicPath: '/_nuxt/' },
},
],
],
3rd issue that I faced was, I've created categories.json file and uploaded to s3 bucket and was calling from axios, to avoid any cors issue update s3 cors setting as follows
You can find this in s3 bucket -> Permissions then -> scroll below -> () Cross-origin resource sharing (CORS)
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"HEAD"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [],
"MaxAgeSeconds": 3000
}
]
I am working with an Aurelia app that should start at a different page than index.html, but I cannot find where to change that.
Where in an Aurelia app can you set which landing page to use?
This is misunderstanding. index.html page is the default landing page set by web server, not Aurelia. E.g. if you try to get the url e.g.https://stackoverflow.com the web server will give index.html by default. You need to change it in web server.
e.g. using Apache web server directive DirectoryIndex myindex.html
From https://httpd.apache.org/docs/2.4/mod/mod_dir.html:
The DirectoryIndex directive sets the list of resources to look for, when the client requests an index of the directory by specifying a / at the end of the directory name.
When using development server of Aurelia (default webpack-dev-server configured by aurelia-cli), the index.ejs compiles to index.html. You may need to change configuration of HtmlWebpackPlugin in webpack.config.js in order to change generated file from index.html to some other name:
new HtmlWebpackPlugin({
template: 'index.ejs',
filename: 'myindex.html',
...
If you're using the CLI, there is not an easy way to do this. The CLI is mostly for basic use cases, and if you're trying to do something fancy, you're going to have to learn a bit more about JavaScript tooling.
You can still do it and here's how:
Open aurelia_project/tasks/run.js and make sure the server property of the argument to the browserSync function has the index property pointing at the index file you want to use, like this:
let serve = gulp.series(
build,
done => {
browserSync({
online: false,
open: false,
port: 9000,
logLevel: 'silent',
server: {
index: 'my-special-index.html', // Make sure you have this line in there.
baseDir: [project.platform.baseDir],
middleware: [historyApiFallback(), function(req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
next();
}]
}
}
);
I am trying out Webpack for the first time. I've been using Gulp with Browserify for some time and am pretty comfortable with it. At this point, I'm just testing out a couple of Webpack plugins. Namely the compression-webpack-plugin. I've never used compression before, so bear with me if I'm making any noob mistake.
Below is my webpack.config.js. The result is I get a main.js, main.js.gz, main.css and index.html. The main.js is injected into the index.html, but if I open index.html in my browser, it serves the uncompressed main.js, not the compressed main.js.gz. I had read that I wouldn't need to include the .gz extension in my script tag, and the html-webpack-plugin doesn't include it, so I figured things are working correctly, yet the uncompressed main.js is served, rather than the compressed one.
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
entry: './app/scripts/main.js',
output: {
path: path.join(__dirname, 'public'),
filename: '[name].js',
chunkFilename: '[id].js'
},
module: {
loaders: [
{test: /\.scss$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader')},
{test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}
]
},
plugins: [
new HtmlWebpackPlugin({
hash: true,
template: 'app/index.html',
inject: 'body'
}),
new ExtractTextPlugin('[name].css'),
new CompressionPlugin()
]
};
To load main.js.gz instead of main.js in case of included main.js in script-tag, you need to configure your web-server (apache, nginx, etc.)
Remember that configuration should load .js.gz or .js depend on if browser accepts gzip. Web-server can check it in HTTP request header Accept-Encoding: gzip, deflate
In browser devtools you will see main.js in any cases.
You can conditionally serve gz statics easily with nginx gzip static module. The server checks if app.js.gz file for e.g. requested /statics/app.js is present and serves it transparently. There is no need to change your application or detect Accept-Encoding - all that is handled by nginx module. Here is config snippet:
location /statics/ {
gzip_static on;
}
I'm a little late to this thread, but thought I'd add my 2c. I generated a gz file using webpack, but Apache kept serving the uncompressed one (or erroring if it wasn't present), despite Accept-Encoding being set correctly. Turns out I had to uncomment AddEncoding x-gzip .gz .tgz and reload httpd. For the record, AddType application/x-gzip .gz .tgz was already set, and I'm using Apache 2.4.6 with Chrome 62. Thanks to Dmitry above for nudging me to look at my conf/httpd.conf file.