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

 

　　

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

• 1， 创建vue 文件 

1.  vue create  my_vue_project 
2.  npm install vue-cli
3.  npm install vue-route 

• 创建的文件目录 --- 

 

• 2, 使用 router 

1> 截图+代码

 

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

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