前端vue2、vue3去掉url路由“ # ”号——nginx配置(一)https://developer.aliyun.com/article/1492688
⭐vue打包 assetsPublicPath base 为绝对路径 /
💖vue2 配置 assetsPublicPath
"use strict"; // Template version: 1.3.1 // see http://vuejs-templates.github.io/webpack for documentation. const path = require("path"); module.exports = { dev: { // Paths assetsSubDirectory: "myblog_static", assetsPublicPath: "/", proxyTable: { "/api/": { target: "后端接口地址", //后端接口地址 ws: true, //接受websocket请求 changeOrigin: true, //是否允许跨越 chunkOrigins: true, pathRewrite: { "^/api": "api", //重写, }, }, }, // Various Dev Server settings host: "localhost", // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined autoOpenBrowser: false, errorOverlay: true, notifyOnErrors: true, poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- // Use Eslint Loader? // If true, your code will be linted during bundling and // linting errors and warnings will be shown in the console. useEslint: false, // If true, eslint errors and warnings will also be shown in the error overlay // in the browser. showEslintErrorsInOverlay: false, /** * Source Maps */ // https://webpack.js.org/configuration/devtool/#development devtool: "cheap-module-eval-source-map", // If you have problems debugging vue-files in devtools, // set this to false - it *may* help // https://vue-loader.vuejs.org/en/options.html#cachebusting cacheBusting: true, cssSourceMap: true, }, build: { // Template for index.html index: path.resolve(__dirname, "../dist/index.html"), // Paths assetsRoot: path.resolve(__dirname, "../dist"), assetsSubDirectory: "myblog_static", assetsPublicPath: "/", /** * Source Maps */ productionSourceMap: false, // https://webpack.js.org/configuration/devtool/#production devtool: "#source-map", // Gzip off by default as many popular myblog_static hosts such as // Surge or Netlify already gzip all myblog_static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: true, productionGzipExtensions: ["js", "css"], isIgnoreLogs:true, // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or off bundleAnalyzerReport: process.env.npm_config_report, }, };
💖vue3 配置 base
import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; // @ts-ignore import { resolve } from "path"; // @ts-ignore import Components from "unplugin-vue-components/vite"; // @ts-ignore import { AntDesignVueResolver } from "unplugin-vue-components/resolvers"; // https://vitejs.dev/config/ export default defineConfig({ // 打包相对路径 base: '/', server: { port: 3000, open: true, cors: true, proxy: { "^/cloudApi/": { target: "https://yongma16.xyz/back-front/", // target: "http://localhost:9090/", changeOrigin: true, ws: true, rewrite: (path) => path.replace(/^\/cloudApi/, ""), }, }, }, "css": { preprocessorOptions: { less: { javascriptEnabled: true, patterns: [resolve(__dirname, "./src/style/main.less")], }, }, }, resolve: { alias: { "@": resolve(__dirname, "src"), }, }, plugins: [ vue(), Components({ resolvers: [AntDesignVueResolver()], }), ], });
💖验证
1.检查 路径十是否都是绝对路径
2. 本地打开index.html不可取,使用http-server启动打开
检查绝对路径
检查http-server可以运行vue而且没有#号
⭐nginx 配置
💖 使用默认的nginx 静态资源文件夹
- vue打包目录就放在 nginx 默认 html静态文件夹
location / { try_files $uri $uri/ /index.html; }
💖 自定义静态资源文件夹
# 路径 location / { root /web-server/front-project/dist; try_files $uri $uri/ @router; index index.html index.htm; } # @router配置 location @router { rewrite ^.*$ /index.html last; } # 静态资源代理 location /myblog_static { alias /web-server/front-project/dist//myblog_static/; }
效果:
⭐结束
本文分享到这结束,如有错误或者不足之处欢迎指出!