当前位置:网站首页 / web开发 / 正文

【AY】从C#转web前端之路记录[2]-从vs2019入手vue与发布

时间:2021年01月21日 | 作者 : aaronyang | 分类 : web开发 | 浏览: 172次 | 评论 0

首先打开vs2019的,工具-获取工具和功能

image.png

确保安装了nodejs

====================www.ayjs.net       杨洋    wpfui.com        ayui      ay  aaronyang==============

image.png

安装好后,启动vs2019

搜索下

image.png

image.png

image.png

发现过会,上方报错

image.png

我就打开下载个nodejs装下https://nodejs.org/en/download/

关闭vs2019.

image.png

image.png

我是安装一直保持默认的。


打开刚刚那个项目

项目有缺失的

image.png

右键项目

image.png选择“在此处打开命令提示符”


运行npm的指令

 npm install -g

image.png

然后运行指令npm run serve

image.png

当然你也可以,直接用VS2019的F5快捷键,一键搞定

image.png



如果有脚手架报错,那运行一下这个npm install -g vue-cli 或 npm install 自动补齐缺失的包



IIS发布

在项目的目录下新增一个vue.config.js

image.png

const path = require('path')

function resolve(dir) {
    return path.join(__dirname, dir)
}

module.exports = {
    // baseUrl  type:{string} default:'/' 
    // 将部署应用程序的基本URL
    // 将部署应用程序的基本URL。
    // 默认情况下,Vue CLI假设您的应用程序将部署在域的根目录下。
    // https://www.my-app.com/。如果应用程序部署在子路径上,则需要使用此选项指定子路径。例如,如果您的应用程序部署在https://www.foobar.com/my-app/,集baseUrl到'/my-app/'.

    baseUrl: process.env.NODE_ENV === 'production' ? '/' : '/',

    // outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'

    outputDir: 'D:\\Release\\AY',

    // pages:{ type:Object,Default:undfind } 
    /*
      构建多页面模式的应用程序.每个“页面”都应该有一个相应的JavaScript条目文件。该值应该是一
      个对象,其中键是条目的名称,而该值要么是指定其条目、模板和文件名的对象,要么是指定其条目
      的字符串,
      注意:请保证pages里配置的路径和文件名 在你的文档目录都存在 否则启动服务会报错的
    */
    // pages: {
    // index: {
    // entry for the page
    // entry: 'src/index/main.js',
    // the source template
    // template: 'public/index.html',
    // output as dist/index.html
    // filename: 'index.html'
    // },
    // when using the entry-only string format,
    // template is inferred to be `public/subpage.html`
    // and falls back to `public/index.html` if not found.
    // Output filename is inferred to be `subpage.html`.
    // subpage: 'src/subpage/main.js'
    // },

    //   lintOnSave:{ type:Boolean default:true } 问你是否使用eslint
    lintOnSave: false,
    // productionSourceMap:{ type:Bollean,default:true } 生产源映射
    // 如果您不需要生产时的源映射,那么将此设置为false可以加速生产构建
    productionSourceMap: false,
    // devServer:{type:Object} 3个属性host,port,https
    // 它支持webPack-dev-server的所有选项

    devServer: {
        port: 8080, // 端口号
        host: 'localhost',
        https: false, // https:{type:Boolean}
        open: true, //配置自动启动浏览器
        //// proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
        //proxy: {
        //    '/api': {
        //        target: '<url>',
        //        ws: true,
        //        changeOrigin: true
        //    },
        //    '/foo': {
        //        target: '<other_url>'
        //    }
        //},  // 配置多个代理
    },
    configureWebpack: config => {
        config.resolve = {
            extensions: ['.js', '.vue', '.json', ".css"],
            alias: {
                'vue$': 'vue/dist/vue.esm.js',
                '@': resolve('src'),
            }
        },
        config.performance={
            hints: 'warning',
            //入口起点的最大体积 整数类型(以字节为单位)
            maxEntrypointSize: 50000000,
            //生成文件的最大体积 整数类型(以字节为单位 300k)
            maxAssetSize: 30000000,
            //只给出 js 文件的性能提示
            assetFilter: function(assetFilename) {
                return assetFilename.endsWith('.js');
            }
        }
    }
}

然后安装IIS,这个百度自己解决。

image.png


打开命令行,输入npm run build

image.png


image.png


IIS指定一个虚拟路径就行了





试过vs2019自带的发布,报错如下不折腾了。

image.png


====================www.ayjs.net       杨洋    wpfui.com        ayui      ay  aaronyang================



我在vs2019的vue文件,加了点中文,然后iis发布后,访问中文乱码的

image.png

vs编辑文件是utf-8

..................

估计默认创建的项目问题,


我打开记事本,拷贝里面的代码,粘贴到记事本,中文部分会乱码的。

修改乱码的地方,然后另存为Home.vue文件

然后删掉原来的项目的Home.vue文件,把这个文件拷贝进去。

重新编译就行了。

image.png



还有个解决方案


在搭建vue-cli的时候,cmd运行命令控制台出现乱码,在网上找到的解决办法如下

解决:


打开cmd,在控制台输入CHCP 65001,按回车键即可将编码格式设成utf-8,再创建就不会乱码了。

执行完vue init webpack one (自定义文件名)后,控制台走后会出现? Project name (one),继续点回车,按网上创建项目流程继续创建即可。



推荐您阅读更多有关于“”的文章

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  查看权限

合肥科大智能常年招聘C# .NET CORE,vue前端,JAVA开发,有想换工作的私聊我AY唯一QQ:875556003和AY交流

抖音号:wpfui,可以看到我的很多作品效果,私活合作请qq联系我

AYUI8社区版Github地址:前往获取

作者:杨洋(AaronYang简称AY,安徽六安人)目前是个人,还没公司AY唯一QQ:875556003和AY交流

高中学历,2015年1月17日开始,兴趣学习研究WPF,目前工作繁忙,不接任何活

声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费.AY主要靠卖技术服务挣钱

不是从我处购买的ayui7源码,我不提供任何技术服务,如果你举报从哪里买的,我可以帮你转正为我的客户,并送demo

查看捐赠

AYUI7.X MVC教程 更新如下:

第一课 第二课 程序加密教程

vs2015 企业版密钥HM6NR-QXX7C-DFW2Y-8B82K-WTYJV

vs2017 企业版密钥NJVYC-BMHX2-G77MM-4XJMR-6Q8QF

标签列表