Vue 3 从创建项目到部署到打包改包全流程

2026-08-16 20:45:52

环境： Mac + Node 20 版本 + npm 10.7.0 版本 从vue3创建 到 nginx 服务器部署 上线 -- 打包路径和访问路径修改全流程

1， 创建vue 文件

vue create my_vue_project

npm install vue-cli

npm install vue-route

创建的文件目录 ---

2, 使用 router

1> 截图+代码

2> 修改main.js 截图+代码

import { createApp } from 'vue'

import App from './App.vue'

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

import router from './router'; // 确保路径正确

const app = createApp(App)

app.use(ElementPlus)

app.use(router);

app.mount('#app')

3> 创建router/index.js 文件

// router/index.js

import { createRouter, createWebHistory } from 'vue-router';

import LoginPage from '@/components/LoginPage.vue';

import PurchasePage from '@/components/PurchasePage.vue';

import HomePage from '@/components/HomePage.vue';

import IndexPage from "@/components/IndexPage.vue";

const routes = [

{ path: '/', component: IndexPage },

{ path: '/login', component: LoginPage },

{ path: '/home', component: HomePage },

{

path: '/purchase',

component: PurchasePage,

// meta: { requiresAuth: true } // 路由守卫标记

},

];

const router = createRouter({

history: createWebHistory('/ai_computing_power/manager'),

routes

});

// 路由守卫

router.beforeEach((to, from, next) => {

const isLoggedIn = !!localStorage.getItem('user-token'); // 假设使用 token 验证登录状态

if (to.matched.some(record => record.meta.requiresAuth) && !isLoggedIn) {

next('/login');

} else {

next();

}

});

export default router;

4 , 配置打包文件 -- 由默认的 dist 改为 -- ai_computing_power/manager 所需要的步骤1> 截图和代码

2> 路由修改

3> 放置到服务器上

4> nginx 服务配置 路由 访问 （捷途和代码）

server

{

listen 80;

listen 443 ssl;

server_name xxxx.com.cn;

index index.php index.html index.htm default.php default.htm default.html;

root /www/wwwroot/aiweb.auto-link.com.cn_80;

#CERT-APPLY-CHECK--START

# 用于SSL证书申请时的文件验证相关配置 -- 请勿删除

include /www/server/panel/vhost/nginx/well-known/xxxx.com.cn.conf;

#CERT-APPLY-CHECK--END

#SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则

#error_page 404/404.html;

ssl_certificate /www/server/panel/vhost/cert/xxxx.com.cn/fullchain.pem;

ssl_certificate_key /www/server/panel/vhost/cert/xxxx.com.cn/privkey.pem;

ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;

ssl_ciphers EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA;

ssl_prefer_server_ciphers on;

ssl_session_cache shared:SSL:10m;

ssl_session_timeout 10m;

add_header Strict-Transport-Security "max-age=31536000";

error_page 497 https://$host$request_uri;

#SSL-END

#ERROR-PAGE-START 错误页配置，可以注释、删除或修改

error_page 404 /404.html;

#error_page 502 /502.html;

#ERROR-PAGE-END

#PHP-INFO-START PHP引用配置，可以注释或修改

include enable-php-80.conf;

#PHP-INFO-END

#REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效

include /www/server/panel/vhost/rewrite/aiweb.auto-link.com.cn.conf;

#REWRITE-END

#禁止访问的文件或目录

location ~ ^/(\.user.ini|\.htaccess|\.git|\.env|\.svn|\.project|LICENSE|README.md)

{

return 404;

}

#一键申请SSL证书验证目录相关设置

location ~ \.well-known{

allow all;

}

#禁止在证书验证目录放入敏感文件

if ( $uri ~ "^/\.well-known/.*\.(php|jsp|py|js|css|lua|ts|go|zip|tar\.gz|rar|7z|sql|bak)$" ) {

return 403;

}

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$

{

expires 30d;

error_log /dev/null;

access_log /dev/null;

}

location ~ .*\.(js|css)?$

{

expires 12h;

error_log /dev/null;

access_log /dev/null;

}

location /ai_computing_power/manager/

{

root /www/wwwroot/xxxx.com.cn_80;

index index.html index.htm;

try_files $uri $uri/ /ai_computing_power/manager/index.html;

}

access_log /www/wwwlogs/xxxx.com.cn.log;

error_log /www/wwwlogs/xxxx.com.cn.error.log;

}

接下来就可以 使用你的 域名 + /ai_computing_power/manager 进行访问了 比如 www.baidu.com/ai_computing_power/manager